How does JavaScript handle event delegation?

This task is covered in 2 stacks on this page: JavaScript, React. The "Event Delegation" snippet in JavaScript uses `parent.addEventListener(event, (e) => {`.

Which code does the JavaScript example use?

The "Event Delegation" snippet uses `parent.addEventListener(event, (e) => {`, from the DOM Manipulation section of the JavaScript cheat sheet.

Which stacks cover "event delegation" on this page?

JavaScript, React. Together they hold 2 copy-ready snippets for this task.

Event delegation

2 snippets across 2 stacks - JavaScript, React

JSJavaScript

Event Delegation

JS · DOM Manipulation

Syntax

parent.addEventListener(event, (e) => {
  if (e.target.matches(selector)) { ... }
});

Example

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

todoList.addEventListener("click", (event) => {
  const deleteBtn = event.target.closest(".delete-btn");
  if (deleteBtn) {
    const item = deleteBtn.closest(".todo-item");
    item.remove();
  }
});

Note Attach one listener to a parent instead of many on children. Works for dynamically added elements too. Use closest() to find the nearest matching ancestor.

REReact

Capture Phase & Delegation

RE · Event Handling

Syntax

// Capture phase (fires before children)
<div onClickCapture={handler}>...</div>

// Event delegation: one handler on parent
<ul onClick={handleItemClick}>
  <li data-id="1">A</li>
  <li data-id="2">B</li>
</ul>

Example

function ItemGrid({ items, onItemAction }) {
  function handleClick(e) {
    const itemEl = e.target.closest('[data-item-id]');
    if (!itemEl) return;

    const id = itemEl.dataset.itemId;
    const action = e.target.dataset.action;

    if (action === 'delete') {
      onItemAction(id, 'delete');
    } else if (action === 'edit') {
      onItemAction(id, 'edit');
    }
  }

  return (
    <div onClick={handleClick}>
      {items.map(item => (
        <div key={item.id} data-item-id={item.id}>
          <span>{item.name}</span>
          <button data-action="edit">Edit</button>
          <button data-action="delete">Delete</button>
        </div>
      ))}
    </div>
  );
}

Note Event delegation (one handler on a parent) reduces the number of event listeners and works well for dynamic lists. Use data-* attributes or closest() to identify which child triggered the event. React internally uses delegation at the root already.

Frequently asked questions

How does JavaScript handle event delegation?: This task is covered in 2 stacks on this page: JavaScript, React. The "Event Delegation" snippet in JavaScript uses `parent.addEventListener(event, (e) => {`.
Which code does the JavaScript example use?: The "Event Delegation" snippet uses `parent.addEventListener(event, (e) => {`, from the DOM Manipulation section of the JavaScript cheat sheet.
Which stacks cover "event delegation" on this page?: JavaScript, React. Together they hold 2 copy-ready snippets for this task.
Is there anything to watch out for?: Yes. For "Event Delegation": Attach one listener to a parent instead of many on children. Works for dynamically added elements too. Use closest() to find the nearest matching ancestor.