One Listener, Thousand Rows

Event delegation is the pattern of attaching one listener to a parent element and using event.target to determine which child was clicked. It works because of event bubbling — events propagate up from the target element to the root. One listener on <table> handles clicks on any <tr>, <td>, or <button> inside it.

Three delegation patterns for different use cases:

// Pattern 1: closest() for nested elements
container.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]');
  if (btn) handleAction(btn.dataset.action, btn);
});

// Pattern 2: target matching with matches()
container.addEventListener('click', (e) => {
  if (e.target.matches('.delete-btn')) deleteRow(e.target);
});

// Pattern 3: stop propagation for specific children
container.addEventListener('click', (e) => {
  if (e.target.closest('.no-bubble')) return; // opt-out
  handleClick(e);
});

The root cause: 1000 calls to addEventListener on mount, no calls to removeEventListener on unmount/re-render. Each listener holds a reference to its row element. When rows were re-created after sort, the old elements became "detached DOM nodes" — no longer in the tree, but still in memory because the JavaScript listener closure referenced them. This is the classic event listener memory leak pattern, amplified by the re-render cycle.

The migration removed ~40 lines and simplified the render logic:

// Before: listener per row (called on every render)
function attachRowListeners(rows) {
  rows.forEach(row => {
    row.querySelector('.view-btn').addEventListener('click', () => {
      openDetail(row.dataset.rowId);
    });
  });
}

// After: single delegated listener (set once, never removed)
tbody.addEventListener('click', (event) => {
  const row = event.target.closest('tr[data-row-id]');
  if (!row) return;
  openDetail(row.dataset.rowId);
});

The listener is attached once when the component mounts and never removed — because removing the <tbody> removes the listener automatically. New rows added after sort or filter work without any re-binding because the parent listener catches all clicks regardless of when the child was added.

Open DevTools Performance → record → add rows in both modes. The broken version shows layout + listener-attach cost growing linearly. Fixed mode is constant time.

Three delegation patterns for different scenarios:

// Pattern 1: closest() — nested elements (most common)
container.addEventListener('click', (e) => {
  const btn = e.target.closest('[data-action]');
  if (!btn) return;
  handleAction(btn.dataset.action);
});

// Pattern 2: matches() — simple flat lists
container.addEventListener('click', (e) => {
  if (e.target.matches('.list-item')) {
    handleItem(e.target);
  }
});

// Pattern 3: data-action dispatch — multi-action parents
container.addEventListener('click', (e) => {
  const el = e.target.closest('[data-action]');
  if (!el) return;
  const actions = {
    delete: () => deleteRow(el.closest('tr').dataset.id),
    edit:   () => openEditor(el.closest('tr').dataset.id),
    expand: () => toggleRow(el.closest('tr').dataset.id),
  };
  actions[el.dataset.action]?.();
});

Implementation notes:

• When delegation fails: focus and blur do not bubble — use focusin/focusout instead, which do bubble
• stopPropagation: any child that calls event.stopPropagation() will prevent the event reaching your delegated parent listener — avoid stopPropagation in component libraries
• pointer-events: none: if the parent has this CSS, it won't receive clicks — check the computed style if delegation mysteriously stops working
• Shadow DOM: events don't bubble across shadow boundaries by default — delegation only works within the same shadow root