Event Listeners & Handlers

parent.addEventListener('click', function(e) {
  if (e.target.matches('.button')) {
    // Handle button click
  }
});

A way to manage multiple event listeners
A pattern where you attach a single listener to a parent for handling events on children
Event delegation is a pattern where instead of attaching event listeners to individual elements, you attach a single listener to a parent element to handle events on its children (including future children). This is highly efficient for large numbers of similar elements (like list items or buttons) as it reduces memory usage and improves performance. It's especially useful for dynamically added elements, as they'll automatically work without needing new listeners.
A method to prevent event bubbling
A technique for creating custom events