What is the difference between event bubbling and event capturing?
Which of the two is the most appropriate to use? In what aspects is each of them more efficient? In what cases would we use each of them?
What is the difference between event bubbling and event capturing?
Which of the two is the most appropriate to use? In what aspects is each of them more efficient? In what cases would we use each of them?
Bubbling means an event that propagates from the element that executed the event(
event.target
), to the furthest element in the hierarchy that has the same event. That is, from the source of the event to the most distant ancestor:Note how the event is executed first
p
, thendiv
and lastform
. That's bubbling.To stop bubbling use the method
event#stopPropagation()
:As for capturing , it is the opposite of bubbling: instead of executing the events from the source to the ancestor, it would be from the ancestor to the source.
For example, see how there are 2 events defined here, 1 for the
form
and one for thep
. Note how clicking on the elementp
first executes the event ofform
and then it goes top
, while if you click onform
, only its event is executed:As you may have already noticed, bubbling is the default event. If you want to use capturing, then you would only have to pass it
true
as the last parameter to theaddEventListener
.Regarding the use cases, it is always recommended to use bubbling because it is the easiest way to discover the position of the element that triggered the event. I have never seen the need to use capturing and surely you will have its reasons that by default it is bubbling.
In JavaScript when an event is executed on a DOM element, there are 3 different phases which are executed in the following order:
Let's see an example of bubbling, if we have a hierarchy of elements which capture the same type of event, they will be activated from the target element to the parent:
As you can see, if we click on the target element, the alert is activated first, then the Div and at the end in the Form, this is bubbling, from the target to the parent.
Now we go with capturing, which is in the opposite direction and we can see it in operation using the function
addEventListener(evento, manejador[, capturing])
on an element, let's see an example:In this second example, we add an alert to the capturing events by putting true as the third parameter in addEventListener , and we can see the order in which the events are executed, capturing first, from the parent to the target element and then back again. bubble, from target to parent.
All this has many advantages depending on what you want to achieve in your code, capturing is not widely used due to its nature of being from the parent node to the child node, however bubbling is something very important and that we must take into account when using events in JavaScript, since propagating to the element
document
can cause something we don't want.I leave you this excellent post by Javascript.info , it is in English but it explains in a more detailed way the propagation of events, how to stop it and the properties that we must know of each event.
Difference between capture and bubbling
bubbling runs through the sun tree from the deep out
capture is the opposite of bubbling
Example for bubbling
example to capture