Mastering the Event Bubbling in JavaScript
One of the most crucial features in JavaScript that has remained almost unchanged from the beginning is event bubbling. Without event bubbling, JavaScript wouldn’t make sense. It is the ultimate mechanism for handling various user events. In this article, we’ll cover how it works and what you can do to improve your use of it.
What is Event?
First of all, let’s talk about events. Most of you are using some framework that takes care of all the logic; you just specify some click, mouseUp, or other "event" that is ultimately transformed into a JavaScript listener.
When I was working with JavaScript without much thought about it, I didn’t really care how event bubbling worked; I just used it. However, when I was asked during an interview how event bubbling works and in what direction the event bubbles — from inner node up or vice versa — I was really confused by such a seemingly trivial thing.
Let’s dive a bit deeper:
<div id="grandparent">
<h1>Grandparent - only one event listener with event.explicitOriginalTarget().id</h1>
<div id="parent">
Parent
<div id="child">
Child
</div>
</div>
</div>
<script>
document.getElementById('grandparent').addEventListener('click', function(event) {
console.log('Grandparent clicked!');
console.log(event.explicitOriginalTarget.id);
});
// document.getElementById('parent').addEventListener('click', function(event) {
// console.log('Parent clicked!');
// event.stopPropagation();
// });
// document.getElementById('child').addEventListener('click', function(event) {
// console.log('Child clicked!');
// // event.stopPropagation();
// });
</script>
This is our result. Now, I recommend you take this code, save it, and run it in your browser. Then, uncomment the other two sections and observe what happens.
How to stop event propagation?
First, if we uncomment everything and then click on the #child element, we will see that the #child and #parent event listeners are triggered, but the #grandparent is not triggered. The reason is that the parent event listener has event.stopPropagation().
In real-life situations, we use event.stopPropagation() for cases where we have some special functionality on our parent element but want to make an exception for a child element. For example, you might have a table with rows, and when you click on a row, you select it. However, if you click on an input inside that row, you don't want the row to be selected; you only want to type some information into that input.
How Event Bubbling Works in the DOM
How should we be using our knowledge? If you followed the example and tried to uncomment the event listeners, you might be wondering: Do we really need #parent and #child listeners? This question on StackOverflow provides a great explanation of how event listeners can decrease performance.
The best thing you can do is to have one event listener in a higher section that checks for the IDs of its child elements. This way, you have just one event listener triggered, and at the same time, you have information about the target. MDN Web Docs is a great resource for further reading.
What Is the Difference Between event.stopPropagation() and event.preventDefault()?
As we saw earlier in the article, event.stopPropagation() stops the event from bubbling up. However, event.preventDefault() does not stop the event; it prevents the native behavior of the HTML tags. For example:
<form id='formExample' method="post">
<input type="number" value="0" />
...
</form>
const form = document.getElementById('form')
form.addEventListener('submit', (event) => {
event.preventDefault()
// the click on the submit button will bubble up in the DOM
// but we are preventing the native behaviour
})Note: you can test your skills in here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Test_your_skills:_Events
In conclusion I hope that this article helped you to understand the event bubbling more. I tried to write it in a brief and simple manner.
