Event Bubbling - JavaScript Concepts Simplified

Hello guys, welcome to another article in the JavaScript Concepts Simplified article series. Today, we'll be looking into Event Bubbling in JavaScript.

I'm just going to go through some of the basic things you need to know before going into the main event.

Background Knowledge

An event is an action or an occurrence that happens in your system. The simplest example would be the user clicking on a button.

For each event that is fired, we can write an event handler (A JavaScript function to handle the event) to do what we want to do. For example, we can write an event handler function to print something on the screen once the user clicks on the button.

We also have event listeners in JavaScript. Event listeners listen to the events happening. So, if we want to print something on the screen once the user clicks on the button, we need to first create an event listener to listen for the click event of the button.

When we are loading HTML pages in browsers, the browser creates a tree-like structure for each page called the DOM. For example, if you have a button inside your body tag, the path to the button element would be html -> body -> button.

Three Phases of Event Handling

When it comes to handling events, modern browsers have three phases.

1. Capturing Phase
2. Target Phase
3. Bubbling Phase

The Capturing Phase

The browser checks to see if the element's outer-most ancestor has an onclick event handler registered on it for the capturing phase, and runs it if so.

Source - MDN Docs

The Target Phase

The browser checks to see if the target property has an event handler for the click event registered on it, and runs it if so.

Then, if bubbles is true, it propagates the event to the direct parent of the selected element, then the next one, and so on. Otherwise, if bubbles is false, it doesnt propagate the event to any ancestors of the target.

Source - MDN Docs

The Bubbling Phase

The browser checks to see if the direct parent of the element selected has an onclick event handler registered on it for the bubbling phase, and runs it if so.

Source - MDN Docs

Wait, What?

It is hard to grasp the issue by reading the above lines. Let me simplify. Here is the issue we are facing.

Think you have created a UI with two div blocks (Block A and Block B). Block B is placed inside Block A. And you have created event handlers for the click event of both div tags.

Now when you click on Block B, before calling B's event handler, the browser calls A's event handler function. Obviously, this is not what we expected. When we click on B, only the event handler of B should be called.

How do we fix this?

Luckily, we do have a solution for this. In the event object, we have a function called stopPropogation. You can call this function at the start of the event handler function of B. You will see that only the event handler function of B is getting executed this time.

When is Event Bubbling Useful?

There could be some use cases where this can be useful. For example, when you have a list of items and you want to do something for all of the items, you will usually have to add event listeners for all the items.

But since you now know the concept of event bubbling, you can just write and assign the event handler for the parent node and see the magic happen.

This concept is called event delegation. You can read more on that in this article.

Thank you for reading the article. Hope you learned something valuable today. And most importantly, stay safe guys