What Is the Difference Between Event Bubbling and Capturing?
Understand the DOM event dispatch model — capturing, target, and bubbling phases — and when to use each in JavaScript.
Expected Interview Answer
Bubbling and capturing are the two opposite directions an event travels through the DOM tree: capturing fires the event from the root down to the target element first, and bubbling fires it back up from the target to the root afterward, and by default JavaScript listeners run during the bubbling phase.
When an event like a click occurs on a deeply nested element, the browser does not just notify that element — it runs a full three-phase dispatch: capturing phase (root down to the target's parent), target phase (the element itself), then bubbling phase (target back up to the root). By default, `addEventListener(type, handler)` attaches to the bubbling phase; passing `{ capture: true }` as the third option attaches it to the capturing phase instead, so it fires on the way down before the target is even reached. This matters practically for event delegation (which relies on bubbling to catch events at an ancestor) and for cases where you need to intercept an event before a child gets a chance to handle or stop it, which requires capturing. `stopPropagation()` halts further travel in whichever phase it is called, and `stopImmediatePropagation()` additionally stops other listeners on the same element from firing.
- Bubbling enables efficient event delegation on a single ancestor listener
- Capturing allows intercepting events before children can handle them
- Understanding both phases clarifies exactly when and why stopPropagation matters
- Correct phase choice avoids duplicate or conflicting handler execution
AI Mentor Explanation
When an appeal goes up, it first passes down through the chain of command — captain briefs the umpire, umpire signals the third umpire — before the decision actually lands on the specific incident (that is capturing, top-down). Then the outcome travels back up: the third umpire tells the on-field umpire, who tells the captain, who tells the team (that is bubbling, bottom-up). A coach who wants to intervene before the on-field umpire even rules would need to catch the appeal on the way down, not wait for it to bubble back up. This down-then-up dispatch pattern is exactly how DOM events traverse the element tree.
Step-by-Step Explanation
Step 1
Capturing phase begins
The event starts at the document root and travels down toward the target element.
Step 2
Target phase
The event reaches the actual element that triggered it.
Step 3
Bubbling phase begins
The event travels back up from the target through each ancestor to the root.
Step 4
Listeners fire per phase
Default listeners run on bubble; `{ capture: true }` listeners run on the way down instead.
What Interviewer Expects
- Clear explanation of the three-phase dispatch: capture, target, bubble
- Knowledge that addEventListener defaults to the bubbling phase
- Understanding of when capturing is actually needed vs bubbling
- Correct explanation of stopPropagation and its scope
Common Mistakes
- Believing events only bubble and there is no capturing phase
- Confusing stopPropagation with preventDefault (different purposes)
- Not knowing the third argument/option enables capture-phase listening
- Assuming delegation requires capturing when it actually relies on bubbling
Best Answer (HR Friendly)
“When you click something on a page, the click event does not just fire once — it travels down from the top of the page to the exact element you clicked, then travels back up again. Capturing is that first trip down, and bubbling is the trip back up. Most of the time we listen during bubbling, which is also what makes techniques like event delegation possible.”
Code Example
const outer = document.getElementById('outer')
const inner = document.getElementById('inner')
outer.addEventListener('click', () => console.log('outer capture'), { capture: true })
inner.addEventListener('click', () => console.log('inner target'))
outer.addEventListener('click', () => console.log('outer bubble'))
// Clicking #inner logs, in order:
// 'outer capture' -> 'inner target' -> 'outer bubble'
inner.addEventListener('click', (e) => {
e.stopPropagation() // stops it from reaching 'outer bubble'
})Follow-up Questions
- How does event delegation rely specifically on the bubbling phase?
- What is the difference between stopPropagation and stopImmediatePropagation?
- When would you deliberately use a capturing-phase listener?
- Do all events bubble? Give an example of one that does not.
MCQ Practice
1. In which order does the DOM event dispatch model run its phases?
The dispatch model always runs capturing top-down first, hits the target, then bubbles bottom-up.
2. What phase does addEventListener attach to by default?
Without `{ capture: true }`, listeners run during the bubbling phase by default.
3. What technique depends on event bubbling to work?
Event delegation attaches one listener to an ancestor and relies on events bubbling up to it.
Flash Cards
What is capturing? — The phase where an event travels from the root down to the target element.
What is bubbling? — The phase where an event travels from the target back up to the root.
Default addEventListener phase? — Bubbling, unless `{ capture: true }` is passed.
What does event delegation rely on? — Bubbling — a single ancestor listener catches events from descendants.