0Pricing
JavaScript Academy · Lesson

Dynamic Lists with Delegation

Manage events for elements added at runtime.

The Dynamic Element Problem

When you attach listeners directly to elements, any element added to the DOM after setup has no listener. Delegation solves this because the parent listener catches events from future children too.

Direct Listeners Break

Here, a listener is added to existing items. A newly appended item gets nothing and stays dead.

document.querySelectorAll(".item").forEach((el) =>
  el.addEventListener("click", handle)
);
list.appendChild(newItem); // newItem has NO handler

All lessons in this course

  1. The Capture and Bubble Phases
  2. Event Delegation Pattern
  3. Dynamic Lists with Delegation
  4. Custom Events
← Back to JavaScript Academy