Event Delegation

What UI pattern does this delegation code implement?

const menu = document.querySelector('.context-menu');
document.addEventListener('contextmenu', e => {
  const target = e.target.closest('[data-context]');
  if (!target) return;
  
  e.preventDefault();
  menu.style.left = `${e.clientX}px`;
  menu.style.top = `${e.clientY}px`;
  menu.dataset.for = target.dataset.context;
  menu.hidden = false;
  
  const close = () => {
    menu.hidden = true;
    document.removeEventListener('click', close);
  };
  document.addEventListener('click', close);
});

Dropdown menu
Context menu
This implements a context menu system using event delegation. Key features include: 1) Positioning menu at click coordinates, 2) Preventing default context menu, 3) Associating menu with clicked element through data attributes, 4) Automatic menu closure on click outside, 5) Cleanup of temporary event listeners, 6) Efficient handling of multiple context menu triggers through delegation. This pattern provides a clean way to implement custom context menus while maintaining good performance and clean event handling.
Modal dialog
Tooltip

Next Question (20/20)