Understanding Event Bubbling in JavaScript: A Simple Interactive Guide

🔥 What Is Event Bubbling?

Event bubbling is a mechanism where an event starts from the deepest (innermost) element that was clicked and then travels upward through its parent elements.

Think of it like dropping a pebble in water — the ripple begins at the point of impact and expands outward.
Similarly, when you click a nested element:

1. The event fires on the clicked element.
2. Then it “bubbles up” to its parent.
3. Then to the parent’s parent.
4. And so on… until it reaches the top.

This default behavior helps simplify event handling. Instead of attaching listeners everywhere, you can listen at a higher level and catch bubbling events.

🎮 Interactive Demo: See Event Bubbling in Action

Click the boxes in the demo below and watch how the event flows upward.

CodePen Live Demo

We have three nested elements:

• Parent
• Child (inside Parent)
• Inner (inside Child)

When you click anywhere inside the demo, the Event Log on the right will show exactly which elements received the event — in order.

It also includes a Bubbling Toggle Button that lets you switch between:

✔ Bubbling Enabled (default behavior)
✖ Bubbling Disabled (e.stopPropagation() is used)

This makes it easier to understand what’s happening behind the scenes.

🔥 How Event Bubbling Works (Based on the Demo)

When bubbling is enabled, clicking the Inner box shows logs like:

🔵 Inner clicked
🟢 Child clicked
🔴 Parent clicked

This is the natural bubbling chain:

1. Event starts at Inner
2. Moves to Child
3. Moves to Parent

JavaScript does this automatically.

🛑 What Happens When Bubbling Is Disabled?

Your demo adds a toggle button that controls a variable:

let bubblingEnabled = true;

When the user disables bubbling, the inner click handler runs:

if (!bubblingEnabled) {
  e.stopPropagation();
  log("⛔ Bubbling stopped using e.stopPropagation()");
}

Now when clicking Inner, the log becomes:

🔵 Inner clicked
⛔ Bubbling stopped using e.stopPropagation()

No Child.
No Parent.
The event stops right where it started.

This is the clearest possible way to demonstrate how stopPropagation() affects event flow.

🧠 Why This Matters

Understanding event bubbling helps you:

• Avoid unexpected triggers
• Build dropdowns, modals, and menus
• Handle global clicks without attaching many listeners
• Control event flow precisely when needed

With your demo, readers not only see bubbling happen — they can visually compare both behaviors.

📝 Full Updated Behavior Summary (For the Blog)

✔ When Bubbling Is Enabled

Click “Inner”:

🔵 Inner clicked
🟢 Child clicked
🔴 Parent clicked

Click “Child”:

🟢 Child clicked
🔴 Parent clicked

Click “Parent”:

🔴 Parent clicked

✖ When Bubbling Is Disabled

Click “Inner”:

🔵 Inner clicked
⛔ Bubbling stopped using e.stopPropagation()

Click “Child”:

🟢 Child clicked

Parent does NOT get the event.

🎯 Final Thoughts

Your interactive demo gives readers something most tutorials lack — a real-time visual understanding of event flow. The bubbling toggle makes it even more powerful because users can instantly see the difference between:

• Normal bubbling
• Bubbling stopped using e.stopPropagation()

If you enjoyed this post or have any feedback, feel free to connect with me:

• 💼 LinkedIn — Let’s network and share ideas!
• 👨‍💻 GitHub — Check out more of my projects and code examples.

If you enjoyed my content or want to support my writing journey, please take a moment to follow me on Medium. I regularly share insights on JavaScript, modern frontend development, and practical dev tricks you can use in real projects.

🔗 Read the original article on Medium:

https://medium.com/javascript-in-plain-english/event-bubbling-in-javascript-explained-with-interactive-demo-stoppropagation-guide-a9a9e08ef20c

❤️ Follow me on Medium for more:

https://medium.com/@dhardik1430