Creating Custom Events

How can you ensure a custom event handler runs only once?

element.addEventListener('customAction', function handler(e) {
  console.log('Action handled:', e.detail);
  element.removeEventListener('customAction', handler);
}, { once: true });

Use removeEventListener immediately
Set the once option to true
There are two main ways to ensure a custom event handler runs only once: 1. Use the once option in addEventListener (recommended): - Cleaner syntax - Automatically removes the listener after first execution - Handled by the browser efficiently 2. Manually remove the listener in the handler: - More verbose but offers more control - Requires keeping a reference to the handler function - Useful when conditional removal is needed The once option is generally preferred for its simplicity and built-in cleanup.
Return false from the handler
Use event.stopImmediatePropagation()

Next Question (7/20)