Event Bubbling & Capturing

parent.addEventListener('click', e => {
  const shouldHandle = e.target.matches('.interactive');
  if (!shouldHandle) return;
  // Handle event
});

Event filtering
Event delegation
This is event delegation, a pattern where a single event listener on a parent element handles events on multiple child elements by checking the event.target. It's extremely useful for several reasons: 1) Better performance as it reduces the number of event listeners, 2) Automatically handles dynamically added elements, 3) Uses less memory, 4) Simplifies event management. The matches() method checks if the target matches a CSS selector, making it easy to filter which elements should trigger the handler.
Event bubbling
Event capturing