Event Delegation

What pattern does this delegation implementation demonstrate?

const delegate = (element, options = {}) => {
  const defaultOptions = {
    events: ['click'],
    selector: '*',
    preventDefault: false
  };
  const opts = { ...defaultOptions, ...options };
  
  opts.events.forEach(eventType => {
    element.addEventListener(eventType, e => {
      const target = e.target.closest(opts.selector);
      if (!target || !element.contains(target)) return;
      
      if (opts.preventDefault) e.preventDefault();
      opts.handler?.(e, target);
    });
  });
};

Basic event handling
Configurable delegation
This demonstrates a configurable delegation pattern that provides flexible setup through options. Key features include: 1) Support for multiple event types with a single setup, 2) Configurable default behavior (preventDefault), 3) Default options with override capability, 4) Clean handler interface providing both event and target, 5) Built-in security check with contains(), 6) Flexible selector targeting. This pattern is particularly useful for creating reusable delegation behaviors that can be customized for different use cases.
Event bubbling control
Simple event binding

Next Question (9/20)