The DOM Bubble! What is event bubbling, and how to handle it?

The conecpt: Event bubbling is a concept in javascript dom where an event propagetes to its parents elements. The concept of bubbling is similar to how a real bubble works. How does a bubble works? Think about a bubble -- it floats up in the air, right? But it doesn't stay up forever. Eventually, it props! It starts samll and grows bigger as it rises. Still confused? No worries! Imagine throwing a stone into a pond. The water ripples out from where the stone hit, right? It keeps going until it fades away. In similar way when a click or any other bubbling event trigger it spreads out from the targeted element up-to parents and that's parents until it reaches the root element. With real example: Now let's understand by an real example. Button For this html document dom tree will something like: What happens when the button is clicked? Clicking on the button first button will trigger the event and that bubble(event) upto its parent card element and then container and finally the body element and as body is the root so it will stop bubbling. It will be more clear if we add event listener. const body = document.querySelector("body"); const container = document.querySelector(".container"); const card = document.querySelector(".card"); const button = document.querySelector(".card button"); body.addEventListener("click", (e) => { alert("body click"); }); container.addEventListener("click", (e) => { alert("container click"); }); card.addEventListener("click", (e) => { alert("Card click"); }); button.addEventListener("click", (e) => { alert("button click"); }); If you click the button, the sequence will be: - "button click" - "Card click" - "container click" - "body click" Here if user click on the button it will first tigger button listener and alert button click and then even will pass to its parent card element and alert Card click and then its parent container and alert container click and lastly body and alert body click as these all element have event listener for click event so all of it's parents will be trigger, which you may not want. So now we understand what actaully event bubbling is. Now question is how to prevent it? Before we stop bubbling, let’s understand that not all events bubble. You can check if an event bubbles like this: button.addEventListener("click", (e) => { event.bubbles; // true if event is bubbling else false }); Here is a list of bubbling and non-bubbling events

Apr 19, 2025 - 23:58

The DOM Bubble! What is event bubbling, and how to handle it?

The conecpt:

Event bubbling is a concept in javascript dom where an event propagetes to its parents elements.

The concept of bubbling is similar to how a real bubble works.

How does a bubble works?

Think about a bubble -- it floats up in the air, right? But it doesn't stay up forever. Eventually, it props! It starts samll and grows bigger as it rises.

Still confused? No worries! Imagine throwing a stone into a pond. The water ripples out from where the stone hit, right? It keeps going until it fades away. In similar way when a click or any other bubbling event trigger it spreads out from the targeted element up-to parents and that's parents until it reaches the root element.

With real example:

Now let's understand by an real example.


   class="container">
     class="card">

What happens when the button is clicked?

Clicking on the button first button will trigger the event and that bubble(event) upto its parent card element and then container and finally the body element and as body is the root so it will stop bubbling.

const body = document.querySelector("body"); const container = document.querySelector(".container"); const card = document.querySelector(".card"); const button = document.querySelector(".card button"); body.addEventListener("click", (e) => { alert("body click"); }); container.addEventListener("click", (e) => { alert("container click"); }); card.addEventListener("click", (e) => { alert("Card click"); }); button.addEventListener("click", (e) => { alert("button click"); });

Here if user click on the button it will first tigger button listener and alert button click and then even will pass to its parent card element and alert Card click and then its parent container and alert container click and lastly body and alert body click as these all element have event listener for click event so all of it's parents will be trigger, which you may not want.

So now we understand what actaully event bubbling is. Now question is how to prevent it?

Before we stop bubbling, let’s understand that not all events bubble. You can check if an event bubbles like this: