Event Delegation

What UI concern does this delegation code address?

menu.addEventListener('click', async e => {
  const item = e.target.closest('.menu-item');
  if (!item) return;
  
  item.classList.add('loading');
  try {
    await handleMenuAction(item.dataset.action);
  } finally {
    item.classList.remove('loading');
  }
});

Event prevention
Memory management
State synchronization
Loading state management
This code addresses UI loading state management in async operations using event delegation. It ensures proper handling of loading states by: 1) Adding a loading indicator before the async operation starts, 2) Guaranteeing removal of the loading state using try/finally, even if the operation fails, 3) Preventing stuck UI states due to errors, 4) Providing visual feedback during async operations, 5) Managing state at the individual item level while using a single delegate handler.

Next Question (8/20)