Application Events with EventTarget and CustomEvent

Application Events with EventTarget and CustomEvent: working example

Run this standalone example in a modern browser console unless another environment is specified. Expected result: The console prints Saved 7, then Dispatched; the second saved event has no remaining listener.

const bus = new EventTarget();
bus.addEventListener("saved", event => {
  console.log(`Saved ${event.detail.id}`);
}, { once: true });
bus.dispatchEvent(new CustomEvent("saved", { detail: { id: 7 } }));
bus.dispatchEvent(new CustomEvent("saved", { detail: { id: 8 } }));
console.log("Dispatched");

1. Expected result: The console prints Saved 7, then Dispatched; the second saved event has no remaining listener.
2. once removes the listener after its first invocation.
3. detail is the same referenced value supplied by the sender, not a structured clone.