Imagine that you have several nested blocks:
<div id="elem1">
<div id="elem2">
<div id="elem3"></div>
</div>
</div>
Get references to our divs into variables:
let elem1 = document.querySelector('#elem1');
let elem2 = document.querySelector('#elem2');
let elem3 = document.querySelector('#elem3');
And now we will hang click handlers on them:
elem1.addEventListener('click', function() {
alert('green');
});
elem2.addEventListener('click', function() {
alert('blue');
});
elem3.addEventListener('click', function() {
alert('red');
});
Let's display our blocks on the screen by adding some CSS to them:
Click now on the innermost red block and you will see how the event fires first in the red block, then in the blue one, then in the green one. And this is logical, because by clicking on the inner block, you simultaneously click on all the outer ones.
That is, it turns out that when you click on the innermost block, the click event fires first in it, then fires in its parent, in the parent of its parent, and so on, until it reaches the very top.
This behavior is called bubbling by analogy with the rising of an air bubble from the bottom. Just like the bubble, our event seems to float up, each time triggering on higher blocks.
By your own, write the code that will demonstrate the bubbling of events. Check it for bubbling different types of events.
Not all events may bubble up. Experimentally find at least one event that will not bubble up.