Event Delegation

What delegation pattern is shown here?

document.addEventListener('click', e => {
  if (e.target.closest('.item')?.contains(e.target.closest('.exclude'))) return;
  // Handle non-excluded clicks
});

Event filtering
Nested exclusion zones
This demonstrates the nested exclusion zones pattern in event delegation. It allows certain areas within delegated elements to be exempt from the delegation handling. This is useful for: 1) Complex interactive components where some nested elements need different behavior, 2) Preventing handler execution for specific sub-elements, 3) Implementing clickable areas that shouldn't trigger the main item action, 4) Managing interactive zones within larger clickable areas. The contains() check ensures that if the click originated in an excluded zone, the handler returns early.
Event bubbling
Event capturing

Next Question (10/20)