Understanding event bubbling, event capturing, and why events exist at all — with restaurant and classroom stories you’ll never forget.
- Why Events Are Needed 📱Imagine a food delivery app. You click the “Order Now” button… and nothing happens🤷♂️. No sound. No feedback. No confirmation. Just dead silence.
That’s what happens when a page doesn’t listen for user events. Without events:
- You can’t respond to button clicks
- Can’t handle form submissions
- Can’t open/close modals
- Can’t run animations or logic
Events are how JavaScript knows something has happened — and gives you a chance to respond.
Why Event Bubbling and Capturing Were Introduced?
Let’s jump into our main metaphor:
🍽️ The Restaurant Waiter Story
Scenario 1 – A waiter per table:
Imagine a restaurant with 20 tables. To handle orders, you assign 20 waiters – one per table.
Now every time a customer waves, a different waiter responds.
🛑 Problem:
- Too much overhead
- Hard to manage
- Doesn’t scale
✅ The Smart Waiter Strategy
Now instead of 20 waiters, you hire 1 smart waiter who stands near the door.
- He watches all tables.
- When someone waves (clicks), he steps in and takes the order.
- Efficient, less chaos.
🔁 3. What is Event Bubbling?
*Event bubbling means the event starts from the clicked element and moves upward in the DOM hierarchy.
*
Child → Parent → Grandparent → Document
👨👩👧 Family Tree Example:
<div id="grandparent">
Grandparent
<div id="parent">
Parent
<div id="child">Child</div>
</div>
</div>
🧠 Bubbling Code Example:
`document.getElementById("grandparent").addEventListener("click", () => {
console.log("Grandparent clicked");
});
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked");
});
document.getElementById("child").addEventListener("click", () => {
console.log("Child clicked");
});`
🧪 Output when clicking on child:
> Child clicked
> Parent clicked
> Grandparent clicked
🌊 The event bubbles up from child to grandparent.
🔄 4. What is Event Capturing?
Event capturing is the opposite direction.
The event starts from the top (document) and travels downward to the actual element.
Document → Grandparent → Parent → Child
🧠 Capturing Code Example:
document.getElementById("grandparent").addEventListener("click", () => {
console.log("Grandparent captured");
}, true); // 👈 third param true = capturing
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent captured");
}, true);
document.getElementById("child").addEventListener("click", () => {
console.log("Child captured");
}, true);
🧪 Output when clicking on child:
Grandparent captured
Parent captured
Child captured
🔎 Capturing allows you to intercept or monitor events before they reach the child.
✋ 5. What is event.stopPropagation()?
Sometimes, you don’t want the event to keep traveling up or down the DOM tree.
Example: You want to handle the event at the child and stop it there.
📌 Code Example:
document.getElementById("child").addEventListener("click", (e) => {
console.log("Child clicked - Stopping propagation");
e.stopPropagation(); // 👈 stops the event here
});
document.getElementById("parent").addEventListener("click", () => {
console.log("Parent clicked");
});
document.getElementById("grandparent").addEventListener("click", () => {
console.log("Grandparent clicked");
});
🧪 Output when clicking child:
Child clicked - Stopping propagation
That’s it! The event does not bubble to parent or grandparent.
*🚦 Use stopPropagation() when:
*
- You want to prevent accidental triggers on parent elements
- You're handling modals, dropdowns, or stop-click-outside logic
- You want full control over the event path
💡 Summary
| Concept | Direction | Use Case |
|---|---|---|
| Bubbling | Child → Parent → Document | Efficient event delegation |
| Capturing | Document → Parent → Child | Early interception before the target |
| stopPropagation | Stops the event mid-flow | Avoid unwanted side-effects |
Top comments (1)
Honestly love when stuff like this makes the tech less confusing - clear and straight up.