Event Dispatch with dispatchEvent()

`dispatchEvent()` programmatically dispatches a DOM event on an `EventTarget`. The dispatch is synchronous: listeners run during the call according to the event's applicable propagation path and phases.

An event is dispatched by calling `target.dispatchEvent(event)`, where `target` implements `EventTarget`, such as an element, document, or window. The event must be constructed before dispatch, commonly with `new Event()` or a more specific constructor such as `MouseEvent` or `CustomEvent`.

For an element participating in the DOM tree, dispatch follows the event propagation path when the event is configured to bubble. Capturing listeners run on the way toward the target, target listeners run at the target, and bubbling listeners run on the way back up when `event.bubbles` is true.

Dispatch is synchronous. When `dispatchEvent()` returns, the listeners invoked by that dispatch have already run, unless a listener schedules asynchronous work such as a timer or promise callback. Exceptions thrown by event listeners are not normally propagated back through the `dispatchEvent()` call as ordinary JavaScript exceptions; browsers report them as uncaught exceptions.

`dispatchEvent()` returns a boolean. It is `false` when the dispatched event is cancelable and at least one listener called `preventDefault()`, and `true` otherwise. Calling `preventDefault()` has an effect only for a cancelable event.

Programmatically dispatched events are not identical to trusted user-agent events: `event.isTrusted` is `false` for events created and dispatched by script. This distinction matters when application logic must distinguish browser-generated user interaction from synthetic events.

Key points

• `dispatchEvent()` is synchronous.
• Propagation can involve capture, target, and bubble phases.
• `bubbles` controls whether the event propagates upward from the target.
• `preventDefault()` affects the return value only for cancelable events.
• Script-created events have `isTrusted === false`.

Interview questions

Is `dispatchEvent()` synchronous or asynchronous?

It is synchronous. Event listeners invoked by the dispatch execute before `dispatchEvent()` returns. A listener can start asynchronous work, but that later work is not part of the synchronous dispatch itself.

How does a dispatched event propagate through the DOM?

For an event with an applicable DOM propagation path, dispatch can involve capture, the target, and bubbling. Capture listeners run while moving toward the target, target listeners run at the target, and bubbling listeners run while moving back toward ancestors. Bubbling requires the event to be configured with `bubbles: true`.

What does the boolean returned by `dispatchEvent()` mean?

The return value is `false` when the event is cancelable and a listener calls `preventDefault()`. Otherwise it is `true`. Therefore, the return value can be used to detect whether a cancelable default action was prevented during dispatch.

How would you implement a custom event that carries application data?

A common approach is `CustomEvent`, passing the data through its `detail` property. For example, `new CustomEvent("user-selected", { detail: { id: 42 }, bubbles: true })` creates an event that can carry structured application data and optionally bubble. The receiving listener reads the value from `event.detail`.

What is the difference between a synthetic event and a trusted browser event?

An event created and dispatched by application code is synthetic and has `isTrusted === false`. Browser-generated user interaction events can be trusted by the user agent. Code should not assume that dispatching a synthetic event reproduces every browser-side activation or security-sensitive behavior of genuine user interaction.