Platform under construction

Events & Forms

Advanced

Event Delegation

Event delegation uses one parent listener to handle events from matching child elements.

list.addEventListener("click", event => {
  const button = event.target.closest("[data-remove]");
  if (!button) return;
  button.closest("li").remove();
});

Events & Forms

Delegation keeps dynamic lists simple.

Instead of attaching a listener to every child, attach one listener to a stable parent and inspect the event target.

Delegation works because many events bubble from the child to the parent. It is especially useful for lists whose items are added later.

The key pattern is target.closest(selector), followed by a guard when the click did not happen on a matching element.

One parent listener

Less setup and simpler cleanup.

Dynamic children

New items work without new listeners.

closest selector

Find the relevant child control or item.

Guard clause

Ignore events that do not match.

Examples

Event code should respect how people actually use the interface.

Use one listener for a dynamic list

list.addEventListener("click", event => {
  const remove = event.target.closest("[data-remove]");
  if (!remove) return;
  remove.closest("[data-item]").remove();
});

Adding listeners to every new child manually

document.querySelectorAll("[data-remove]").forEach(button => {
  button.addEventListener("click", removeItem);
});

// New buttons added later are not covered.

Code patterns

Reusable examples for quick reference.

These examples are the event patterns you will reuse constantly: listen, inspect, prevent, delegate, validate and submit.

Delegate button clicks

One listener handles all remove buttons.

list.addEventListener("click", event => {
  const button = event.target.closest("[data-remove]");
  if (!button) return;
});

Find the item

Move from button to row.

const item = button.closest("[data-item]");

Ignore outside clicks

Guard before changing DOM.

if (!list.contains(button)) return;

Delegate by action

Use dataset to choose behavior.

const action = event.target.closest("[data-action]")?.dataset.action;

Rules that matter

Make interaction predictable.

Events are user-facing code. Good handlers stay small, respect native behavior and keep visual, semantic and data state aligned.

Delegate from a stable parent

The parent should exist for the life of the feature.

Use closest

Clicks often start on nested text or icons.

Guard non-matches

Not every click inside the parent is relevant.

Check containment when needed

closest can find ancestors outside a nested context.

Keep actions explicit

data-action can route multiple commands cleanly.

Do not delegate everything

Simple isolated buttons do not need delegation.

Production thinking

Strong event handling makes an interface feel reliable instead of accidental.

Why does this matter?

Delegation keeps interactive lists fast, simple and reliable when items are created dynamically.

Accessibility

Delegated actions should still use real buttons or links so keyboard users trigger the same events.

Production note

Production lists, menus and tables often rely on delegation to avoid thousands of listeners.

SEO note

Delegated behavior should enhance real markup instead of replacing meaningful links and buttons with generic divs.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Add a data-action value and route by action.
Use createElement instead of insertAdjacentHTML.
Prevent removing the last remaining item.

Practice assignment

Do this before moving to the next topic.

Attach one listener to a parent.
Find the clicked child with closest.
Ignore clicks that do not match.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Event Delegation.