JavaScript EventTarget dispatchEvent() Method

What You’ll Learn

dispatchEvent() is how you fire an event on any EventTarget. Create an Event or CustomEvent, then dispatch it to run listeners registered with addEventListener(). Learn the synchronous return value, preventDefault, isTrusted, five examples, and try-it labs.

Introduction

Listening alone is not enough — something must deliver the event. Native clicks are fired by the browser. Your own app events are fired with dispatchEvent().

First create the event (new Event("ping") or new CustomEvent("change", { detail })), then call target.dispatchEvent(event). Matching listeners run right away, before the next line of your code.

Pair this page with addEventListener() and the EventTarget constructor.

Understanding the dispatchEvent() Method

dispatchEvent sends the event through the normal processing rules (including capture and bubble on DOM nodes). For a plain new EventTarget(), listeners on that object simply run in order.

• Event.target becomes the object you called dispatchEvent on.
• Handlers run on a nested call stack — they finish before dispatchEvent returns.
• Exceptions in handlers are reported as uncaught; they do not bubble to your caller.
• Synthetic events have isTrusted === false.

📝 Syntax

General form of EventTarget.dispatchEvent:

dispatchEvent(event)

Parameters

• event — the Event (or CustomEvent) to dispatch. Its target will be set to this EventTarget.

Return value

• false — the event is cancelable and a listener called preventDefault().
• true — otherwise (including non-cancelable events).

Exceptions

TypeError if the event type was not specified during initialization.

Common patterns

const target = new EventTarget();

target.addEventListener("ping", () => console.log("pong"));
target.dispatchEvent(new Event("ping"));

// With data:
target.dispatchEvent(
  new CustomEvent("update", { detail: { count: 3 } })
);

// Cancelable + preventDefault → false
const ok = target.dispatchEvent(
  new Event("save", { cancelable: true })
);

Examples Gallery

Examples follow MDN EventTarget.dispatchEvent() patterns. Use View Output or Try It Yourself for each case.

const target = new EventTarget();

target.addEventListener("hello", () => {
  console.log("Hello from dispatchEvent");
});

target.dispatchEvent(new Event("hello"));
// Hello from dispatchEvent

Hello from dispatchEvent

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 }
  })
);
// Ada 42

Ada 42

const target = new EventTarget();

target.addEventListener("save", (e) => {
  e.preventDefault();
});

const allowed = target.dispatchEvent(
  new Event("save", { cancelable: true })
);

console.log(allowed); // false

false

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"));
// before dispatch
// inside listener
// after dispatch

before dispatch
inside listener
after dispatch

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"));
// type: probe
// isTrusted: false
// target is EventTarget: true

type: probe
isTrusted: false
target is EventTarget: true

🚀 Common Use Cases

• Custom app events — notify listeners when a model changes.
• Component APIs — widgets that fire change / submit-style events.
• Veto flows — cancelable events + check the boolean return.
• Testing — simulate delivery without real user input (remember isTrusted).
• Workers — same listen/dispatch pattern off the main thread.
• Not a fake user click for security APIs — browsers treat synthetic events differently.

📝 Notes

• Create the event before calling dispatchEvent.
• Type strings are case-sensitive and must match listeners.
• Delivery is synchronous — plan for nested call stacks.
• Handler exceptions do not reject or throw to your dispatch call site.
• Available in Web Workers (per MDN).
• Related: addEventListener(), removeEventListener(), EventTarget().

💡 Best Practices