Explain event delegation — implement it

Question

What is event delegation and why is it useful? Implement a delegated click handler on a dynamic list.

Accepted Answer

// Usage
// Event delegation = attach ONE listener to a parent instead
// of many listeners on individual children.
// Works because events bubble up the DOM tree.

// ✗ Bad: listener on every item (expensive, misses dynamic items)
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', handleClick)
})

// ✓ Good: single listener on the parent
document.querySelector('.list').addEventListener('click', (e) => {
  const item = e.target.closest('.item')
  if (!item) return               // click wasn't on an item

const id = item.dataset.id
  console.log('Clicked item:', id)
})

// Advantages:
// 1. One listener instead of N — less memory
// 2. Works for dynamically added children automatically
// 3. Easier to manage (add/remove in one place)

// Custom delegate utility
function delegate(parent, selector, event, handler) {
  parent.addEventListener(event, (e) => {
    const target = e.target.closest(selector)
    if (target && parent.contains(target)) {
      handler.call(target, e)
    }
  })
}

Explain event delegation — implement it

Answer