What is the difference between event bubbling and capturing? Of the two, which is the faster and better model to use?
Join them; it only takes a minute:
|
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. Capturing is also called "trickling", which helps remember the propagation order:
Back in the old days, Netscape advocated event capturing, while Microsoft promoted event bubbling. Both are part of the W3C Document Object Model Events standard (2000). IE < 9 uses only event bubbling, whereas IE9+ and all major browsers support both. On the other hand, the performance of event bubbling may be slightly lower for complex DOMs. We can use the Example
In the structure above, assume that a click event occurred in the In capturing model, the event will be handled by the In the bubbling model, the opposite will happen: the event will be first handled by the For more information, see
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.
|
|||||||||||||||||||||
|
|
Description: quirksmode.org has a nice description of this. In a nutshell (copied from quirksmode):
What to use? 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 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
By Default useCapture is false. It means it is in the bubbling phase.
Please try with changing true and false. |
|||||||||||||
|
|
I have found this tutorial at javascript.info to be very clear in explaining this topic. And its 3-points summary at the end is really talking to the crucial points. I quote it here:
|
|||
|
|
protected by dippas Jul 22 '16 at 22:32
Thank you for your interest in this question.
Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?