Event Delegation

Why use the capturing phase for this delegation?

document.addEventListener('click', e => {
  const dialog = e.target.closest('[role="dialog"]');
  if (!dialog) return;
  
  if (!dialog.contains(e.target)) {
    dialog.dispatchEvent(new CustomEvent('dismiss'));
  }
}, true);

To improve performance
To handle events first
Using the capturing phase (true parameter) ensures this handler runs before any bubbling phase handlers. This is important because: 1) It allows intercepting and handling outside clicks before other handlers, 2) It provides consistent dismiss behavior regardless of other handlers, 3) It ensures proper event handling order for modal/dialog patterns, 4) It prevents potential interference from stopPropagation in bubble phase. This pattern is crucial for implementing robust modal/dialog dismiss behavior.
To prevent default behavior
To support more events

Next Question (18/20)