JavaScript Event initEvent() Method

What You’ll Learn

The initEvent() method initializes an event created with document.createEvent() by setting type, bubbles, and cancelable before dispatchEvent(). Learn the old pattern, why it is deprecated, and how to migrate to new Event()—with five examples and try-it labs.

Introduction

Years ago, creating a synthetic event often meant two steps: document.createEvent("Event"), then event.initEvent(type, bubbles, cancelable), then dispatchEvent.

Today you write one expression: new Event("click", { bubbles: true, cancelable: false }). Same idea—name, bubble flag, cancel flag—cleaner API. This tutorial shows the old method so you can recognize it in legacy codebases and replace it confidently.

Understanding Event.initEvent()

An instance method that sets the core flags on an event created with Document.createEvent().

• type — string event name (for example "click").
• bubbles — whether the event bubbles; sets event.bubbles.
• cancelable — whether preventDefault() can cancel it; sets event.cancelable.
• Return value — none (undefined).
• Status — Deprecated on MDN; available in Web Workers, but avoid for new code.

📝 Syntax

initEvent(type, bubbles, cancelable)

Parameters

Return value

None (undefined).

Legacy pattern (avoid in new code)

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

Modern replacement

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

⚖️ initEvent() vs Related Ideas

Examples Gallery

Examples follow MDN Event: initEvent(). Legacy demos are for learning and migration—prefer constructors in real apps.

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

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

elem.dispatchEvent(event);

heard click

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

ping
true
true

const event = new Event("click", {
  bubbles: true,
  cancelable: false
});

elem.addEventListener("click", () => console.log("modern click"));
elem.dispatchEvent(event);

modern click

// Legacy:
const legacy = document.createEvent("Event");
legacy.initEvent("notify", true, false);
child.dispatchEvent(legacy);

// Modern equivalent:
child.dispatchEvent(new Event("notify", { bubbles: true }));

parent heard notify (legacy)
parent heard notify (modern)

// Before (deprecated):
// event.initEvent("save", true, true);

// After:
const event = new Event("save", {
  bubbles: true,
  cancelable: true
});

console.log(event.type, event.bubbles, event.cancelable);
// save true true

save true true

🚀 Common Use Cases

• Reading or maintaining legacy code that still uses createEvent.
• Migrating old synthetic-event helpers to Event() / CustomEvent().
• Teaching how type, bubbles, and cancelable were set historically.
• Comparing deprecated APIs with Baseline constructor APIs.
• Auditing libraries for initEvent / createEvent usage.

🔧 How It Works

📝 Notes

• MDN: Deprecated — Deprecated banner shown before “What You’ll Learn”.
• Not marked Experimental or Non-standard on MDN (deprecated only).
• Intended for events from document.createEvent().
• Available in Web Workers, but still deprecated.
• Related learning: Event(), bubbles, cancelable, type, dispatchEvent(), composedPath().

💡 Best Practices