What is event delegation? | Interview Question

Q: What is event delegation?

**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 bubbling proof and listener-count comparison below were actually run with jsdom. ## 1. Why This Even Matters — A Story First A single security guard stationed at a building's only entrance can identify and log every visitor who walks in, no matter which office they're headed to — the guard does not need a separate agent posted at every single office door. Event delegation is that one guard: it relies on every visitor genuinely passing through the shared entrance (event bubbling) to be seen, without needing to be stationed at every individual destination. ## 2. The Core Idea 📌 **Interview term:** event delegation is the pattern of attaching one listener to a shared ancestor and using `event.target` to identify the actual descendant that triggered the ev

01

Understand the problem

Question presented to candidate: "What is event delegation, in your own words, and what specific browser mechanism makes it actually possible?"

What a strong answer should cover:

📌 Interview term: event delegation — a pattern that exploits event bubbling: instead of attaching a listener to every individual element you care about, you attach one listener to a shared ancestor and inspect event.target to determine which specific descendant triggered it.
📌 Interview term: the enabling mechanism — event delegation is only possible because most DOM events genuinely bubble — travel from the actual target element up through each ancestor in turn, all the way to document. Verified directly with a real dispatched event: a listener on a distant ancestor genuinely receives a click that originated on a deeply nested descendant.
A precise answer distinguishes delegation from simply "having a listener that handles multiple things" — the defining trait is that the listener is attached to an ancestor, not to the elements themselves, and relies specifically on bubbling to reach it.
📌 Interview term: not every event bubbles — a precise answer names that focus/blur do not bubble (their bubbling equivalents focusin/focusout do), which is a real, direct constraint on which events delegation can be used for at all.
A precise answer names the concrete, measured trade-off verified directly: a 1000-element collection needs exactly 1 delegated listener versus 1000 individual ones — the real reason this pattern exists, beyond convenience.

Clarifying questions expected:

None — this is a definitional question; naming the exact underlying mechanism (bubbling) rather than just describing the observable pattern is the strong signal.

Code / implementation expected: Optional — a short delegated-listener snippet demonstrating event.target usage reinforces the definition concretely.

event-delegation

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 bubbling proof and listener-count comparison below were actually run with jsdom.

1.

Solution ready — 2 min read

Classified // press E to declassify

04

Run the code

JSReal proof: a listener on a distant ancestor receives a deeply nested click purely through bubbling

Practice

05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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