What is the difference between bubbling and capturing?
In JavaScript, when an event (like a click) happens on an element, it doesn’t just stay on that element. Instead, it travels through the DOM in two main phases: capturing and bubbling.
1. Event Capturing (Trickling down)
- The event starts from the window → document →
<html>→<body>… down to the target element. - It’s also called the capture phase.
- At this stage, parent elements get a chance to “catch” the event before it reaches the target element.
- To use capturing, you pass
trueas the third argument inaddEventListener:parent.addEventListener("click", handler, true);
2. Event Bubbling (Bubbling up)
- After the event reaches the target element, it bubbles back up from the target → parent → ancestor elements → up to the document and window.
- This is the default phase when you add an event listener without specifying the third argument.
child.addEventListener("click", handler); // bubbling by default
Visual Flow
Capturing Phase: Window → Document → HTML → Body → Parent → Child (Target)
Target Phase: Event executes on the target element
Bubbling Phase: Child (Target) → Parent → Body → HTML → Document → Window
Example
<div id="parent">
<button id="child">Click Me</button>
</div>
document.getElementById("parent").addEventListener("click",
() => console.log("Parent clicked (capturing)"),
true // capturing
);
document.getElementById("parent").addEventListener("click",
() => console.log("Parent clicked (bubbling)"),
false // bubbling
);
document.getElementById("child").addEventListener("click",
() => console.log("Child clicked"),
false
);
If you click the child button, the console order will be:
Parent clicked (capturing) // captured on the way down
Child clicked // target
Parent clicked (bubbling) // bubbled on the way up
✅ Summary:
- Capturing: Event travels top → down (before the target).
- Bubbling: Event travels bottom → up (after the target).
- Default is bubbling in most cases.
No comments yet! You be the first to comment.