mediumFrontend

What is event delegation?

Q: What is event delegation?

**Core concept (TL;DR).** Event delegation attaches a **single** listener to a common ancestor and uses event **bubbling** + event.target to handle events from many child elements — instead of adding a listener to each child. Fewer listeners, less memory, and it automatically covers elements added **later**. One listener on the parent catches bubbling child events <ul> — the one listene

814 views

Understand the problem

Explain delegation.

event-delegation

Attempt it yourself

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

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

One delegated listener on the parent

const list = document.querySelector("#todo-list");

// ONE listener handles clicks from any <li>, current or future
list.addEventListener("click", (e) => {
  const item = e.target.closest("li");   // works even if a child was clicked
  if (!item || !list.contains(item)) return;
  console.log("clicked item:", item.dataset.id);
});

// Adding items later needs NO new listeners:
list.insertAdjacentHTML("beforeend", '<li data-id="99">New</li>');

// target = what was clicked; currentTarget = the <ul> the listener is on

Join the discussion

Discussion (0)

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

How does Array.reduce work?

What is the difference between call, apply, and bind?