Explain event delegation.

Q: Explain 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 listener counts and dynamically-added-element behavior below were **actually run** with jsdom, not described from documentation. ## 1. Why This Even Matters — A Story First Imagine a school where, instead of a teacher walking to every single student's desk individually to collect homework, students simply bring their homework up to the teacher's desk at the front of the room. The teacher does not need to know in advance exactly how many students there are, or reconfigure anything when a new student joins mid-year — one collection point handles every student, including ones who were not even enrolled yet when the system was set up. That single collection point is exactly what a delegated event listener does for an entire list of DOM elements. ## 2. The Co

The problem

Question presented to candidate: "You're building a to-do list where items can be added and removed dynamically. Walk me through how you'd wire up click handlers for a 'delete' button on each item, and what happens to your approach as items are added after the page first loads?"

What a strong answer should cover:

📌 Interview term: event delegation — attaching one event listener to a shared ancestor element, then using event.target inside that single handler to determine which specific descendant was actually interacted with, instead of attaching a separate listener to every individual item.
📌 Interview term: the real, direct answer to the prompt — verified directly with jsdom: a single listener attached to the list's parent genuinely handled a click on an item that was appended to the DOM after the listener was attached, with zero new listeners — while the naive per-item-listener approach genuinely MISSED that same dynamically-added item's click, because no listener had been individually attached to it.
📌 Interview term: event.target vs. event.currentTarget — inside a delegated handler, event.target is the actual, specific element the user interacted with (a button, an icon), while event.currentTarget is always the element the listener was attached to (the shared parent) — a precise answer distinguishes these explicitly, since delegation logic almost always needs target, not currentTarget.
A precise answer names the mechanism that makes delegation possible: event bubbling — the click event genuinely travels up from the clicked descendant through every ancestor, so a listener anywhere on that ancestor chain genuinely receives it, covered in more depth in this bank's own dedicated bubbling/capturing question.
A precise answer names the real, concrete cost comparison verified directly: a 1000-item list needs exactly 1 delegated listener versus 1000 individual listeners — a real, measurable memory and setup-time difference for large or frequently-changing lists.

Clarifying questions expected:

"Roughly how many items, and how often are they added/removed?" — directly decides how much the memory/re-attachment cost of the naive per-item approach actually matters in practice.
"Does the delete button live directly on the item, or nested inside other markup (an icon inside a span inside the button)?" — determines how precisely event.target needs to be checked/matched (e.g. with .closest()) inside the delegated handler.

Code / implementation expected: Yes — a real delegated click handler using event.target, plus the concrete jsdom-verified proof that it correctly handles a dynamically-added item with zero extra listener setup, is the strongest possible answer to the prompt.

events
dom
performance
event bubbling

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 listener counts and dynamically-added-element behavior below were actually run with jsdom, not described from documentation.

1. Why This Even Matters — A Story First

Imagine a school where, instead of a teacher walking to every single student's desk individually to collect homework, students simply bring their homework up to the teacher's desk at the front of the room. The teacher does not need to know in advance exactly how many students there are, or reconfigure anything when a new student joins mid-year — one collection point handles every student, including ones who were not even enrolled yet when the system was set up. That single collection point is exactly

The solution is hidden so you can try first

6 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 event delegation: one listener genuinely catches a click on a dynamically-added item, contrasted with the naive per-item approach missing it