Creating Custom Events

How do you prevent a custom event from being cancelable?

const nonCancelableEvent = new CustomEvent('action', {
  cancelable: false,
  detail: { type: 'save' }
});

document.addEventListener('action', (e) => {
  e.preventDefault(); // Will have no effect
});

Set preventDefault to false
Set cancelable to false
To make a custom event non-cancelable, set the cancelable option to false when creating the event. This means: 1. preventDefault() will have no effect when called on the event 2. The event's defaultPrevented property will always be false 3. The event will always complete its default behavior (if any) 4. Event handlers cannot stop the event's natural progression. This is useful when you want to ensure that certain events always complete their intended behavior regardless of event handler actions.
Use Event instead of CustomEvent
Events are always cancelable

Next Question (5/20)