Event Bubbling 101 🤔

Have you ever wondered what happens when you click on an element nested inside another element on a web page? The answer is event bubbling! 🧐

Event bubbling is a behavior in JavaScript where events that are triggered on a child element also trigger on the parent elements. Let's look at an example to see how this works.

Code example 💻

Consider the following HTML structure:

<div id="parent">
  <p id="child">Click me!</p>
</div>

Now, let's say we want to add a click event listener to the #child element:

const child = document.getElementById('child');
child.addEventListener('click', function() {
  console.log('Child element clicked!');
});

If we click on the #child element, the event listener will log a message to the console. But, since event bubbling is a thing, the click event will also trigger on the #parent element! So, if we add a click event listener to the #parent element, it will also log a message to the console:

const parent = document.getElementById('parent');
parent.addEventListener('click', function() {
  console.log('Parent element clicked!');
});

Now, when we click on the #child element, both event listeners will log their respective messages to the console:

Child element clicked!
Parent element clicked!

Preventing event bubbling 🛑

Sometimes, we might not want the events to bubble up to the parent elements. In that case, we can use the event.stopPropagation() method to prevent the bubbling of events. Let's modify our code example to demonstrate this:

const child = document.getElementById('child');
child.addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('Child element clicked!');
});

const parent = document.getElementById('parent');
parent.addEventListener('click', function() {
  console.log('Parent element clicked!');
});

Now, when we click on the #child element, only the #child event listener will be triggered and the #parent event listener will be ignored. The output in the console will only be:

Child element clicked!

Conclusion 🤔

Event bubbling is a useful behavior in JavaScript that allows us to add event listeners to parent elements and have them triggered when the child elements are interacted with. However, it can also be a nuisance if we don't want the events to bubble up. In that case, we can use the event.stopPropagation() method to prevent event bubbling.

For more information on event bubbling, check out the MDN documentation.

Thank you for reading this blog. If you found it helpful, please consider following me on social media and checking out my other blogs.

• Twitter: @VaibhavAcharya_
• Website: vaibhavacharya.github.io