Event Delegation

What pattern does this event delegation code demonstrate?

document.addEventListener('click', e => {
  const button = e.target.closest('[data-action]');
  if (!button) return;
  
  const action = button.dataset.action;
  handlers[action]?.(e, button);
});

Event bubbling
Command pattern
This code demonstrates the Command pattern implemented through event delegation. It uses data attributes to map elements to their respective handlers, providing several benefits: 1) Clear separation of concerns between event handling and action implementation, 2) Easy addition of new actions without modifying the delegation code, 3) Improved maintainability through centralized handler mapping, 4) Better testability as handlers can be tested in isolation, 5) Declarative action binding through HTML attributes.
Observer pattern
Factory pattern

Next Question (4/20)