What is Event Bubbling and Capturing?
Understand JavaScript event bubbling vs capturing, the three DOM propagation phases, and how to control them with stopPropagation and the capture option.
Expected Interview Answer
Event bubbling and capturing are the two phases of DOM event propagation: capturing travels from the document root down to the target element, and bubbling travels from the target back up to the root.
When an event fires, the browser first runs the capturing phase (outermost ancestor to the target), then the target phase, then the bubbling phase (target back up to the root). By default addEventListener registers a handler for the bubbling phase; passing a third argument of true (or { capture: true }) registers it for the capturing phase. You can stop propagation early with event.stopPropagation().
- Explains why a click on a child also triggers parent handlers
- Enables event delegation via a single ancestor listener
- Lets you intercept events early using the capturing phase
- Gives fine control with stopPropagation and stopImmediatePropagation
- Reduces the number of listeners needed on dynamic lists
AI Mentor Explanation
Picture an appeal in cricket rippling outward: the wicketkeeper shouts first, then slip fielders join, then the whole side and finally the umpire hears it — bubbling carries an event from the exact spot up through every surrounding layer until someone at the top responds.
Step-by-Step Explanation
Step 1
Event fires at the target
A user action such as a click occurs on a specific element, the event's target.
Step 2
Capturing phase runs
The browser walks from the document root down to the target, invoking any capture-phase listeners along the way.
Step 3
Target phase
Listeners registered directly on the target element run.
Step 4
Bubbling phase runs
The event travels from the target back up to the root, invoking bubble-phase listeners (the default) on each ancestor.
Step 5
Control propagation
Call event.stopPropagation() to halt further travel, or stopImmediatePropagation() to also skip remaining handlers on the current element.
What Interviewer Expects
- Clear description of the three propagation phases
- Knowing addEventListener defaults to bubbling
- How to opt into capturing with true or { capture: true }
- Difference between stopPropagation and stopImmediatePropagation
- Awareness that some events (like focus) do not bubble
Common Mistakes
- Thinking events only bubble and forgetting the capturing phase
- Confusing stopPropagation with preventDefault
- Assuming every event bubbles (focus, blur and scroll do not)
- Passing true to addEventListener without knowing it means capture
- Relying on event.target when they mean event.currentTarget
Best Answer (HR Friendly)
“When you click something on a web page, the browser lets that click travel through the elements around it — first downward from the outside to the exact spot (capturing), then back upward to the outside (bubbling). This is what allows a parent element to also react to a click on its child.”
Code Example
const outer = document.getElementById('outer')
const inner = document.getElementById('inner')
// Capturing: runs top-down (third arg true)
outer.addEventListener('click', () => {
console.log('outer capture')
}, true)
// Bubbling: the default phase
outer.addEventListener('click', () => {
console.log('outer bubble')
})
inner.addEventListener('click', (e) => {
console.log('inner target')
// e.stopPropagation() // uncomment to stop the bubble to outer
})
// Clicking #inner logs:
// outer capture -> inner target -> outer bubbleFollow-up Questions
- What is the difference between event.target and event.currentTarget?
- How does stopImmediatePropagation differ from stopPropagation?
- Which common DOM events do not bubble, and why?
- How would you use the capturing phase to intercept an event early?
- How does event delegation build on bubbling?
MCQ Practice
1. By default, addEventListener registers a handler for which phase?
Without a third argument, addEventListener listens during the bubbling phase; pass true or { capture: true } to listen during capturing.
2. Which method stops an event from continuing to propagate to other elements?
stopPropagation() halts further travel through the capturing and bubbling phases; preventDefault() only cancels the default browser action.
3. In what order do the phases run for a click on a nested element?
Propagation goes capturing (root to target), then the target phase, then bubbling (target back to root).
Flash Cards
What is event capturing? — The first propagation phase, travelling from the document root down to the target element.
What is event bubbling? — The final phase, travelling from the target back up to the root; addEventListener uses it by default.
How do you listen in the capturing phase? — Pass true or { capture: true } as the third argument to addEventListener.
stopPropagation vs preventDefault? — stopPropagation halts event travel; preventDefault cancels the default browser action.