Event Bubbling in JavaScript – How Event Propagation Works with Examples

by Mcs July 2, 2025

What is Event Propagation?

In JavaScript, when an event occurs on an element (like a button click), it doesn’t just affect that element alone. It propagates through the DOM in a defined way. There are three phases in this propagation:

Capturing Phase (Trickling Down) – from the window to the target element.
Target Phase – the event reaches the actual element where it happened.
Bubbling Phase (Bubbling Up) – the event bubbles back up from the target to the root.

By default, most events in JavaScript bubble – meaning they propagate upwards from the target element to its ancestors.

What is Event Bubbling?

Event Bubbling is the phase where the event starts at the target element and bubbles up to its parent elements.

For example, if you click a <button> inside a <div>, both the button and the div can respond to the click – if listeners are attached.

Example of Event Bubbling

<div id="parent" style="padding: 20px; background: #f2f2f2;">
<button id="child">Click Me</button>
</div>

document.getElementById("child").addEventListener("click", function () {
alert("Button clicked!");
});
</script>

Try it: When you click the button:

You see "Button clicked!"
Then you see "Parent DIV clicked!"

The event bubbles up from the button to the parent div.

Stopping Event Bubbling

Sometimes you don’t want the event to bubble up. You can stop it using:

event.stopPropagation();

Updated Example:

document.getElementById("child").addEventListener("click", function (event) {
event.stopPropagation(); // Stops the event here
alert("Button clicked, but event will not bubble up.");
});

Now, only the button alert shows – the parent div doesn't get the event.

Why Event Bubbling is Useful

Event bubbling allows you to implement event delegation:

Instead of attaching listeners to every child, you can attach one to the parent.
Useful for dynamically created elements.

Example: Event Delegation

You only need one event listener for the entire list. This is efficient and clean!

Event Bubbling vs Capturing

To listen during the capturing phase, pass a third argument true to addEventListener:

element.addEventListener("click", handler, true); // Capturing phase

But by default, JavaScript uses the bubbling phase (false).

Final Thoughts

Event bubbling is a natural part of how events flow in the DOM.
It’s powerful for writing cleaner, optimized code with event delegation.
Use stopPropagation() carefully to control flow when needed.

Concept	Description
Event Bubbling	Event moves from the target up to its ancestors
stopPropagation()	Stops the event from bubbling up
Event Delegation	Attach one listener to parent to manage child events
Default phase	Bubbling (unless capturing is explicitly set)