JavaScript EventTarget dispatchEvent() Method

Beginner
5 min read
Updated: Nov 2026
5 examples
Method
Decorative image with the word DISPATCHEVENT

Definition

EventTarget.dispatchEvent(event) sends an Event to that target and runs matching listeners right away (synchronously). Per MDN, create and initialize the event first — dispatch is the last step to fire it.

Pass the required arguments shown below. Check return values and browser support before you rely on the result.

Syntax

Call target.dispatchEvent. Start with this line.

JavaScript
target.dispatchEvent(event)
CallWhat it does
target.dispatchEvent(event)Primary signature.
target.dispatchEvent(...)Call with the arguments your case needs.

Built into the browser. Call dispatchEvent(...) on an EventTarget (or Element, Document, Window, …) — no import required.

Library declarations
JavaScript
target.dispatchEvent(event)

Parameters

ParameterDescription
eventRequired. Event / CustomEvent with a type
cancelableOptional. Set { cancelable: true } so preventDefault can cancel
detailOptional. Payload on CustomEvent

Return Value

Return ValueDescription
*false if canceled; else true

JavaScript Examples

Example 1 — Basic dispatchEvent()

Create a target, listen, then fire a simple event.

JavaScript
const target = new EventTarget();
target.addEventListener("hello", () => {
  console.log("Hello from dispatchEvent");
});
target.dispatchEvent(new Event("hello"));
Try It Yourself

How It Works

  1. Make a target. new EventTarget() works without the DOM.
  2. Register a listener. Type "hello" must match the event type.
  3. Create the event. new Event("hello") initializes the type.
  4. Dispatch. The listener runs immediately; return value is true.

Example 2 — CustomEvent with detail

Pass a payload and read it in the listener.

JavaScript
const bus = new EventTarget();
bus.addEventListener("user:login", (e) => {
  console.log(e.detail.name, e.detail.id);
});
bus.dispatchEvent(new CustomEvent("user:login", {
  detail: { name: "Ada", id: 42 }
}));
Try It Yourself

How It Works

  1. Use CustomEvent. Plain Event has no detail field.
  2. Pass detail. Any value — object, number, string.
  3. Read in the handler. e.detail holds your payload.
  4. Good for buses. App-wide messages without DOM elements.

Example 3 — Return Value & preventDefault()

A cancelable event returns false when a listener cancels it.

JavaScript
const target = new EventTarget();
target.addEventListener("save", (e) => {
  e.preventDefault();
});
const allowed = target.dispatchEvent(
  new Event("save", { cancelable: true })
);
console.log(allowed); // false
Try It Yourself

How It Works

  1. Mark cancelable. { cancelable: true } on the event.
  2. Call preventDefault. A listener vetoes the default action.
  3. Check the return. false means canceled; true means not.
  4. Without cancelable. preventDefault has no effect on the return.

Example 4 — Synchronous Order

Listeners finish before the next line after dispatchEvent.

JavaScript
const target = new EventTarget();
const lines = [];
target.addEventListener("step", () => {
  lines.push("inside listener");
});
lines.push("before dispatch");
target.dispatchEvent(new Event("step"));
lines.push("after dispatch");
console.log(lines.join("\n"));
Try It Yourself

How It Works

  1. Log before. Runs first in your script.
  2. Dispatch. Matching listeners run on a nested call stack.
  3. Log after. Runs only after listeners return.
  4. Unlike most native events. Browser UI events are often queued as tasks.

Example 5 — isTrusted Is false

Synthetic events are not browser-trusted.

JavaScript
const target = new EventTarget();
target.addEventListener("probe", (e) => {
  console.log("type:", e.type);
  console.log("isTrusted:", e.isTrusted);
  console.log("target is EventTarget:", e.target instanceof EventTarget);
});
target.dispatchEvent(new Event("probe"));
Try It Yourself

How It Works

  1. Dispatch a probe. Same API as a real event type string.
  2. Read isTrusted. Always false for dispatchEvent.
  3. Check target. Set to the object you called dispatchEvent on.
  4. Security note. Do not treat synthetic events as user gestures.
Compatibility

Browser Support

EventTarget.dispatchEvent() is marked Baseline Widely available on MDN (since July 2015). It is a browser Web API (also available in Web Workers).

✓ Baseline · Widely available

EventTarget.dispatchEvent()

Supported across modern Chrome, Firefox, Safari, and Edge for firing synthetic events.

98% Browser support
Google Chrome Supported · Desktop & Mobile
Full support
Mozilla Firefox Supported · Desktop & Mobile
Full support
Apple Safari Supported · macOS & iOS
Full support
Microsoft Edge Supported · Chromium
Full support
Internet Explorer No native support · Use a polyfill
Polyfill
Opera Supported · Modern versions
Full support
Samsung Internet Supported · Android
Full support
Android WebView Supported · Modern WebView
Full support
dispatchEvent() Excellent

Bottom line: Safe for production. Create Event/CustomEvent first, then dispatch; check the boolean return when the event is cancelable.

Frequently Asked Questions

It sends an Event to that target and runs matching listeners immediately (synchronously). Create the event first with new Event() or new CustomEvent().
No. MDN marks EventTarget.dispatchEvent() as Baseline Widely available (since July 2015). It is not Deprecated, Experimental, or Non-standard. It is also available in Web Workers.
Yes. Unlike most native browser events that are queued, dispatchEvent runs applicable listeners before it returns. Code after dispatchEvent runs only after those listeners finish.
It returns false if the event is cancelable and a listener called preventDefault(). Otherwise it returns true.
Native browser events have isTrusted true. Events you fire with dispatchEvent have isTrusted false — they are synthetic.
Yes. When you call dispatchEvent, Event.target is initialized to the EventTarget you called it on.

Next: removeEventListener()

Unregister listeners with the same function reference.

removeEventListener() →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

12 people found this page helpful

JavaScript EventTarget addEventListener() Method JavaScript EventTarget removeEventListener() Method