34Implement an EventTarget-style custom event system

The DOM's EventTarget behaves differently from a Node-style emitter. Implement a small version of it without using the built-in EventTarget:

• class MyEvent: new MyEvent(type, { cancelable = false, detail = null }) with type, detail, target, defaultPrevented, preventDefault() and stopImmediatePropagation().
• class MyEventTarget with addEventListener(type, listener, options), removeEventListener(type, listener) and dispatchEvent(event).

const cart = new MyEventTarget();
cart.addEventListener("checkout", (event) => {
  if (event.detail.total === 0) event.preventDefault();
});
const ok = cart.dispatchEvent(new MyEvent("checkout", { cancelable: true, detail: { total: 0 } }));
ok; // false, a listener cancelled it

Requirements

• Adding the same listener twice for the same type has no effect (unlike a Node emitter).
• A listener can be a function or an object with a handleEvent(event) method.
• options.once removes the listener after its first call.
• dispatchEvent sets event.target to the target, calls listeners in order with this set to the target (for functions), and returns false if preventDefault() was called on a cancelable event, otherwise true.
• preventDefault() does nothing on events that are not cancelable.
• stopImmediatePropagation() stops the remaining listeners.
• A listener removed during dispatch, before its turn, is not called.