Greetings fellow devs,
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.
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.
In this post i will try to explain the optional arguments that you can use with your eventListeners and the difference between them . Lets start !
target.addEventListener(type, listener[, useCapture]);
target: A case-sensitive string representing the event type to listen for.
type: the type of the event
listener: a function that will trigger when the event occur.
useCapture(optional): A Boolean indicating whether events of this type will be dispatched to the registered listener before being dispatched to any EventTarget beneath it in the DOM tree. Events that are bubbling upward through the tree will not trigger a listener designated to use capture. Event bubbling and capturing are two ways of propagating events which occur in an element that is nested within another element, when both elements have registered a handle for that event. The event propagation mode determines the order in which elements receive the event. See DOM Level 3 Events and JavaScript Event order for a detailed explanation. If not specified, useCapture defaults to false.
In this post i will try to explain what the 3rd optional option is about .
So we setup a basic layout nesting 3 boxes in each other.
We are going to add an eventListener to the box-1, box-2 and box-3 with the 'click' event and a just a console log inside the anonymous function that will be called when the event is trigger.
document.querySelector('.box-1').addEventListener('click', e => {
console.log('Box-1 is clicked');
});
document.querySelector('.box-2').addEventListener('click', e => {
console.log('Box-1 is clicked');
});
document.querySelector('.box-3').addEventListener('click', e => {
console.log('Box-1 is clicked');
});
What do you think its going to happen when i click the box-3 ? Lets check it out.
Example Conclusions
When we click the .box-3 the event is triggered and it prints in the console Box-3, Box-2, Bob-1 . So the event is triggered from the element that its clicked to the top as we can see in the picture. This is Bubbling , first captured and handled by the innermost element and then propagated to outer elements.
Lets now check out the Capturing. To set it up to use Capturing event propagation you have to set the 3rd(optional) argument in the addEventListener to true.
document.querySelector('.box-1').addEventListener('click', e => {
console.log('Box-1 is clicked');
}, true);
document.querySelector('.box-2').addEventListener('click', e => {
console.log('Box-1 is clicked');
}, true);
document.querySelector('.box-3').addEventListener('click', e => {
console.log('Box-1 is clicked');
}, true);
Lets click again the Box-3 and see what happens.
Example Conclusions Capturing
As you can see from the example above , when we click Box-3 it triggers the Box-1 first then the Box-2 and last the element that we clicked . This is what we called Capturing it start from top to bottom( to the element that we triggered the event ).
Final Conclusions
By default javascript is set the event propagation to Bubble . If we want to use capture we have to set the 3rd argument in the addEventListener function to true.
Codepen examples: https://codepen.io/Clickys/pen/LBmwzw?editors=1111
Top comments (2)
Hello Clickys,
Thank you for explaining event bubbling and event capturing with an intuitive example. Just noticed that the screenshots for the handler code has
console.log('Box-1 is clicked')for all the handlers. Initially, I was confused briefly and then figured it could just be a copy/paste issue. Thanks again for the article.
-Sarath
Thank you for your replied , i just notice your msg not sure why i didnt get notify earlier :) .
It was a copy paste issue thank you so much for mentioning it.
Cheers.