Delegation vs many listeners?

Delegation scales for dynamic lists; direct listeners are fine for few static nodes.

Mouseenter delegation?

mouseenter does not bubble. Use mouseover or pointer events.

Frameworks re-bind differently; delegation pattern still applies at root.

One listener for many buttons.

List

Click an item

Clicks report id below.

list.addEventListener('click', (e) => {
  const btn = e.target.closest('button[data-id]');
  if (!btn) return;
  console.log(btn.dataset.id);
});

Delete buttons work on new rows too.

Table

Add row then remove with ×.

tbody.addEventListener('click', (e) => {
  if (e.target.matches('.remove-row')) {
    e.target.closest('tr').remove();
  }
});

Mark scroll/touch listeners passive when not preventDefault.

Note

Use { passive: true } for scroll performance unless blocking scroll.

Improves main-thread scrolling.

window.addEventListener('scroll', onScroll, { passive: true });

Delegation vs many listeners?: Delegation scales for dynamic lists; direct listeners are fine for few static nodes.
Mouseenter delegation?: mouseenter does not bubble. Use mouseover or pointer events.
React virtual DOM?: Frameworks re-bind differently; delegation pattern still applies at root.