Creating Custom Events

When should you use event delegation with custom events?

document.addEventListener('custom:action', function(e) {
  if (e.target.matches('.interactive-element')) {
    const action = e.target.dataset.action;
    const id = e.target.dataset.id;
    
    handleAction(action, id, e.detail);
  }
});

Never use event delegation
Only for native events
When handling multiple similar elements
Event delegation with custom events is particularly useful: 1. When dealing with dynamic content: - Elements added/removed frequently - Dynamic UI updates - Lazy-loaded content 2. For performance optimization: - Fewer event listeners - Better memory usage - Improved initialization time 3. With repeating elements: - Lists of items - Grid layouts - Similar interactive elements 4. For maintainable code: - Centralized event handling - Consistent behavior - Easier updates and modifications
Always use direct listeners

Next Question (13/20)