What is event bubbling and capturing? | Interview Question

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:

01

Understand 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

02

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the 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 documenta

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

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

Practice

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

No responses yet. Be the first to share what you think.