Event Bubbling: Why Parents Feel What Children Do

If you’ve ever clicked a button and wondered “Why did the parent also react?” — welcome to Event Bubbling.

What is Event Bubbling? 🫧

Event bubbling means that when an event happens on a child element, it first runs on that element and then “bubbles up” to its parents, one by one.

Think of it like this: 👉 You tap a glass on a table → the glass feels it → the table feels it → the floor feels it.

Simple Example (HTML + JS)

Consider this structure:

<div id="parent">
  Parent
  <button id="child">Click me</button>
</div>

And this JavaScript:

document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked");
});

What happens when you click the button?

Output:

1. Child clicked
2. Parent clicked

Why? Because the click starts at the button (child), then bubbles up to the div (parent).

---

Real-Life Use Case: Why is this Useful? 🛠️

Imagine you have a list of 100 items. Instead of adding click listeners to 100 list items, you can add just one listener to the parent <ul>.

// Event Delegation
document.getElementById("list").addEventListener("click", (e) => {
  if (e.target.tagName === "LI") {
    console.log("Item clicked:", e.target.textContent);
  }
});

This pattern is called Event Delegation, and it works entirely because of bubbling. ✅ Less code ✅ Better performance ✅ Easier maintenance

---

Stopping the Bubble 🛑

Sometimes you don’t want the event to go up. You can stop it!

document.getElementById("child").addEventListener("click", (e) => {
  e.stopPropagation(); // <--- The magic line
  console.log("Only child clicked");
});

Now, if you click the child, the parent won’t react at all.

---

Quick Summary

1. Event starts at the target element.
2. Then moves upward through parents.
3. This behavior is called Event Bubbling.
4. It is useful for Event Delegation.
5. It can be stopped using e.stopPropagation().

Final Thought

Event bubbling isn’t magic — it’s just the browser trying to be helpful:

"Hey parent, your child just did something. Just letting you know."

Happy Coding! 🚀