JavaScript Event Delegation

The Problem

Adding listeners to many elements:

buttons.forEach(button => {
  button.addEventListener('click', handleClick);
});

The Solution: Delegation

Listen on parent:

parent.addEventListener('click', (e) => {
  if (e.target.matches('button')) {
    handleClick(e);
  }
});

Key Takeaway

Event delegation uses one listener on parent. More efficient. Essential for dynamic content.