JavaScript Event initEvent() Method

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

Definition

event.initEvent(type, bubbles, cancelable) initializes an event created with document.createEvent() (MDN) — then you dispatchEvent() it. Prefer new Event() instead.

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

Syntax

Call event.initEvent. Start with this line.

JavaScript
event.initEvent(type, bubbles, cancelable)
CallWhat it does
event.initEvent(type, bubbles, cancelable)Primary signature.
event.initEvent(...)Call with the arguments your case needs.

Built into the browser. Call initEvent(...) on an Event instance — no import required.

Library declarations
JavaScript
event.initEvent(type, bubbles, cancelable)

Parameters

ParameterDescription
typeRequired. Event name string (e.g. "click")
bubblesRequired. Sets event.bubbles
cancelableRequired. Sets event.cancelable

Return Value

Return ValueDescription
*undefined

JavaScript Examples

Example 1 — Legacy createEvent + initEvent

The classic deprecated pattern from MDN.

JavaScript
const elem = document.getElementById("elem");

elem.addEventListener("click", (e) => {
  console.log("heard", e.type);
});

const event = document.createEvent("Event");
event.initEvent("click", true, false);
elem.dispatchEvent(event);
Try It Yourself

How It Works

  1. Listen first. Attach a click handler on the target.
  2. Create the event. createEvent("Event") (legacy).
  3. Init flags. initEvent("click", true, false).
  4. Dispatch. The listener runs and logs the type.

Example 2 — Read type, bubbles, cancelable

After initEvent, the three properties mirror the arguments.

JavaScript
const event = document.createEvent("Event");
event.initEvent("ping", true, true);

console.log(event.type);       // "ping"
console.log(event.bubbles);    // true
console.log(event.cancelable); // true
Try It Yourself

How It Works

  1. Create + init. Pass type and both booleans.
  2. Read type. Matches the first argument.
  3. Read bubbles. Matches the second argument.
  4. Read cancelable. Matches the third argument.

Example 3 — Modern replacement

Same flags with new Event() — preferred for new code.

JavaScript
const elem = document.getElementById("elem");

elem.addEventListener("click", (e) => {
  console.log(e.type, e.bubbles, e.cancelable);
});

const event = new Event("click", {
  bubbles: true,
  cancelable: false
});
elem.dispatchEvent(event);
Try It Yourself

How It Works

  1. Skip createEvent. No initEvent needed.
  2. Pass options. Constructor sets bubbles / cancelable.
  3. Dispatch as usual. Listener sees the same fields.
  4. Use this in new apps. Clearer and not deprecated.

Example 4 — Bubbles true vs false

Parent hears the event only when bubbles is true.

JavaScript
const parent = document.getElementById("parent");
const child = document.getElementById("child");

parent.addEventListener("ping", () => {
  console.log("parent heard ping");
});

function fire(bubbles) {
  const e = document.createEvent("Event");
  e.initEvent("ping", bubbles, false);
  child.dispatchEvent(e);
}

fire(true);  // parent hears
fire(false); // parent silent
Try It Yourself

How It Works

  1. Listen on parent. Only bubbling events reach it.
  2. Dispatch on child. Path starts at the child.
  3. bubbles true. Parent listener runs.
  4. bubbles false. Stops at the child — parent stays quiet.

Example 5 — After dispatch, init is a no-op

MDN: once dispatched, further initEvent calls do nothing useful.

JavaScript
const elem = document.getElementById("elem");
const event = document.createEvent("Event");
event.initEvent("click", true, false);
elem.dispatchEvent(event);

event.initEvent("ping", false, true);
console.log(event.type); // still "click" after dispatch
Try It Yourself

How It Works

  1. Init once. Set type before the first dispatch.
  2. Dispatch. The event is “used.”
  3. Call init again. It should not reconfigure the event.
  4. Create a new event if you need different flags.
Compatibility

Browser Support

Event.initEvent() is marked Deprecated on MDN. Engines still implement it for createEvent compatibility. New code should use constructors. Also available in Web Workers (still deprecated).

✓ Deprecated

Event.initEvent()

Legacy initializer for createEvent — migrate to new Event().

Legacy Deprecated
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
initEvent() Prefer new Event()

Bottom line: Supported for compatibility, not for new APIs. Prefer new Event(). See the MDN initEvent reference.

Frequently Asked Questions

It initializes an event created with document.createEvent() by setting type, bubbles, and cancelable before you call dispatchEvent(). Once the event has been dispatched, calling initEvent() again does nothing useful.
MDN marks Event.initEvent() as Deprecated. Prefer event constructors such as new Event("click", { bubbles: true, cancelable: false }). It is not labeled Experimental or Non-standard on that MDN page. Also available in Web Workers.
Use new Event(type, options), or a more specific constructor (CustomEvent, MouseEvent, KeyboardEvent, and so on). Then dispatch with target.dispatchEvent(event).
Modern code should not need initEvent() at all. The constructor options already set type, bubbles, and cancelable. initEvent() was paired with the older document.createEvent() API.
type (string event name), bubbles (boolean), and cancelable (boolean). After init, you can read event.type, event.bubbles, and event.cancelable.
Yes. MDN notes the feature is available in Web Workers, but it remains deprecated—prefer constructors there too when available.

Next: preventDefault()

Learn how to cancel an event’s default action.

preventDefault tutorial →

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)

8 people found this page helpful

JavaScript Event composedPath() Method JavaScript Event preventDefault() Method