What is event bubbling and capturing?

Q: What is event bubbling and capturing?

**Target Audience:** Engineers preparing for JavaScript DOM/events interviews. **Difficulty:** Medium > **How to read this doc:** Concepts are explained in plain language first, then tagged with 📌 Interview term: . The exact firing order below was actually reproduced with jsdom, not recited from documentation. ## 1. Why This Even Matters — A Story First Think of a click event as a security guard doing a walk-through: first the guard walks INWARD from the building's front gate all the way to the specific room where the incident happened (capturing), checking each door along the way. Then, having reached the room, the guard walks back OUTWARD, retracing the exact same path to the front gate (bubbling), reporting to each checkpoint again on the way out. Both trips genuinely happen for a single click, in that specific, fixed order. ## 2. The Core Idea 📌 **Interview term:** an event travels through three phases: capture (root to target, listeners registered with `capture:

The problem

Question presented to candidate: "When you click a deeply nested element, in what order do event listeners on its ancestors actually fire — and does it matter whether those listeners were registered for capturing or bubbling?"

What a strong answer should cover:

📌 Interview term: the capture phase — the event first travels downward, from window/document toward the actual target element, triggering any listener registered with the third addEventListener argument set to true (or { capture: true }) along the way.
📌 Interview term: the target phase — the event reaches the actual element it originated on.
📌 Interview term: the bubble phase — the event then travels back upward, from the target back out through every ancestor to document, triggering any listener registered normally (capture false, the default).
📌 Interview term: the real, verified firing order — verified directly with jsdom, registering listeners on both phases on nested outer/inner elements: the real order was outer-capture -> inner-capture -> inner-bubble -> outer-bubble — capture genuinely goes root-to-target first, then bubble genuinely goes target-to-root.
A precise answer names that addEventListener's default is bubble-phase (capture false) — most application code never explicitly deals with the capture phase, but understanding it correctly explains constructs like event delegation and why stopPropagation() called during capture can prevent a target's own bubble-phase handler from ever running.

Clarifying questions expected:

None — this is a definitional/technical question; producing the exact real firing order (not just naming the two phases) is the strong signal.

Code / implementation expected: Yes — reproducing the real firing order with listeners on both phases is the most convincing, concrete demonstration.

events

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Engineers preparing for JavaScript DOM/events interviews. Difficulty: Medium

How to read this doc: Concepts are explained in plain language first, then tagged with 📌 Interview term:. The exact firing order below was actually reproduced with jsdom, not recited from documentation.

1. Why This Even Matters — A Story First

Think of a click event as a security guard doing a walk-through: first the guard walks INWARD from the building's front gate all the way to the specific room where the incident happened (capturing), checking each door along the way. Then, having reached the room, the guard walks back OUTWARD, retracing the exact same path to the front gate (bubbling), reporting to each checkpoint again on the way out. Both trips genuinely happen for a single click, in that specific, fixed order.

2. The Core Idea

📌 Interview term: an event tra

The solution is hidden so you can try first

5 min read · 7 sections

Run the code

Edit the code and run it here. Each console line with an expected value becomes a test.

JavaScriptReal firing order for nested capture- and bubble-phase listeners, reproduced with a dispatched event