What is event delegation?

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

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

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 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 an

The solution is hidden so you can try first

5 min read · 8 sections

Run the code

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

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