Find centralized, trusted content and collaborate around the technologies you use most. Connect and share knowledge within a single location that is structured and easy to search. What is the difference between event bubbling and capturing? When should one use bubbling vs capturing? Event bubbling and capturing are two ways of event propagation in the HTML DOM API, when an event occurs in an element inside another element, and both elements have registered a handle for that event. The event propagation mode determines in which order the elements receive the event.
With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements. With capturing, the event is first captured by the outermost element and propagated to the inner elements.
Back in the old days, Netscape advocated event capturing, while Microsoft promoted event bubbling. On the other hand, the performance of event bubbling may be slightly lower for complex DOMs. We can use the addEventListener type, listener, useCapture to register event handlers for in either bubbling default or capturing mode. To use the capturing model pass the third argument as true. In capturing model, the event will be handled by the div first click event handlers in the div will fire first , then in the ul , then at the last in the target element, li.
In the bubbling model, the opposite will happen: the event will be first handled by the li , then by the ul , and at last by the div element.
In the example below, if you click on any of the highlighted elements, you can see that the capturing phase of the event propagation flow occurs first, followed by the bubbling phase.
Another example at JSFiddle. In a nutshell copied from quirksmode :. It depends on what you want to do. There is no better.
The difference is the order of the execution of the event handlers. Most of the time it will be fine to fire event handlers in the bubbling phase but it can also be necessary to fire them earlier. If there are two elements element 1 and element 2. Element 2 is inside element 1 and we attach an event handler with both the elements lets say onClick.
Now when we click on element 2 then eventHandler for both the elements will be executed. Now here the question is in which order the event will execute. If the event attached with element 1 executes first it is called event capturing and if the event attached with element 2 executes first this is called event bubbling.
As per W3C the event will start in the capturing phase until it reaches the target comes back to the element and then it starts bubbling.
The capturing and bubbling states are known by the useCapture parameter of addEventListener method. I have found this tutorial at javascript. And its 3-points summary at the end is really talking to the crucial points. I quote it here:. How to reload a page using JavaScript? How to write html code dynamically using JavaScript? How to add html elements dynamically with JavaScript? How to load another html page from javascript?
Difference between window, document, and screen in Javascript? Difference between the substr and substring in JavaScript? How to replace all occurrences of a string in JavaScript? How to test a string as a literal and as an object?
What is Associative Array? How do we use it? What is an anonymous function in JavaScript? What is the use of 'bind' method in JavaScript? Pure functions Vs. Javascript, Pass by Value or Pass by Reference? How to prevent modification of an object in Javascript? For instance, if we have a single handler form. A bubbling event goes from the target element straight up. For instance, here body. If an element has multiple event handlers on a single event, then even if one of them stops the bubbling, the other ones still execute.
In other words, event. After it no other handlers execute. Bubbling is convenient. Sometimes event. A task that seemingly requires that may be solved by other means. Also we can write our data into the event object in one handler and read it in another one, so we can pass to handlers on parents information about the processing below. It is rarely used in real code, but sometimes can be useful. The standard DOM Events describes 3 phases of event propagation:. Before we only talked about bubbling, because the capturing phase is rarely used.
Normally it is invisible to us. To catch an event on the capturing phase, we need to set the handler capture option to true :.
0コメント