Web/DOMBrowser
-
Browser Rendering ProcessWeb/DOMBrowser 2020. 2. 23. 15:09
1. Description 1.1 Render Tree With the two processes of parsing concluded and with DOM and CSSOM defined, the browser creates a render tree. A render tree is another tree internally stored by the browser and used to represents visual elements. The elements inside are ignored as well as elements defined with display: none. However is worth remembering that elements with visibility: hidden are st..
-
Event bubbling and capturingWeb/DOMBrowser 2019. 9. 29. 01:40
1. Overview 1.1 Event Bubbling When an event happens on an element, it first runs the handlers on it, then on its parent, then all the way up on other ancestors. 1.2 Event Capturing There’s another phase of event processing called “capturing”. It is rarely used in real code, but sometimes can be useful. 2. Event Bubbling Description 2.1 Example Let’s say we have 3 nested elements FORM > DIV > P ..
-
Event delegationWeb/DOMBrowser 2019. 9. 29. 01:40
1. Overview Capturing and bubbling allow us to implement one of the most powerful event handling patterns called event delegation. The idea is that if we have a lot of elements handled in a similar way, then instead of assigning a handler to each of them – we put a single handler on their common ancestor. In the handler we get event.target, see where the event actually happened and handle it. 2...
-
Difference between event.stopPropagation and event.preventDefaultWeb/DOMBrowser 2019. 9. 28. 16:25
1. Overview Let's distribute the difference between event.stopPropagation and event.preventDefault in DOM Event fine-grained. 2. Description stopPropagation stops the event from bubbling up the event chain. preventDefault prevents the default action the browser makes on that event. 3. Examples button $("#but").click(function (event) { //using preventDefault, only the browser's default action is ..