Event.initEvent() — Methode · JavaScript-Referenz

Signatur

Event.prototype.initEvent(type, bubbles, cancelable)

Beschreibung

initEvent() gehört zur alten DOM-Level-2-Methode, eigene Events zu erzeugen: Zuerst legt man mit document.createEvent("Event") ein leeres Event-Objekt an, danach setzt initEvent() dessen Typ (z. B. "click" oder einen eigenen Namen), ob es im DOM-Baum aufsteigt (bubbles) und ob es mit preventDefault() abgebrochen werden kann (cancelable). Erst dann wird das Event mit dispatchEvent() ausgelöst.

Die Methode muss vor dem Auslösen aufgerufen werden. Wird sie aufgerufen, während das Event bereits verarbeitet wird (also innerhalb eines Listeners dieses Events), hat sie keine Wirkung.

Heute ist initEvent() veraltet. Moderner Code verwendet die Konstruktoren new Event(type, options) bzw. new CustomEvent(type, { detail }), die dasselbe in einem Schritt und lesbarer erledigen. Sinnvoll ist initEvent() nur noch beim Pflegen von Altcode oder wenn sehr alte Browser (Internet Explorer 9–11) unterstützt werden müssen, die die Event-Konstruktoren nicht kennen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Event-Typs, z. B. `"click"`, `"input"` oder ein eigener Name wie `"warenkorb-aktualisiert"`.
$bubbles	boolean	false	Gibt an, ob das Event im DOM-Baum nach oben zu den Elternelementen aufsteigt. Wird später als `event.bubbles` ausgelesen.
$cancelable	boolean	false	Gibt an, ob die Standardaktion des Events mit `preventDefault()` verhindert werden kann. Wird später als `event.cancelable` ausgelesen.

Beispiele

Eigenes Event auf die alte Art erzeugen und auslösen

const button = document.createElement('button');
document.body.append(button);

button.addEventListener('gespeichert', (e) => {
  console.log(`Event: ${e.type}, bubbles: ${e.bubbles}, cancelable: ${e.cancelable}`);
});

// 1. Leeres Event anlegen
const event = document.createEvent('Event');
// 2. Initialisieren: Typ, bubbles, cancelable
event.initEvent('gespeichert', true, true);
// 3. Auslösen
button.dispatchEvent(event);

Event: gespeichert, bubbles: true, cancelable: true

Bubbling und preventDefault nutzen

const form = document.createElement('form');
const input = document.createElement('input');
form.append(input);
document.body.append(form);

// Listener am Elternelement fängt das aufsteigende Event ab
form.addEventListener('validieren', (e) => {
  console.log('Formular hat Event empfangen von:', e.target.tagName);
  e.preventDefault();
});

const event = document.createEvent('Event');
event.initEvent('validieren', true, true);

// dispatchEvent liefert false, wenn preventDefault() aufgerufen wurde
const nichtAbgebrochen = input.dispatchEvent(event);
console.log('Standardaktion ausführen?', nichtAbgebrochen);

Formular hat Event empfangen von: INPUT Standardaktion ausführen? false

Moderne Alternative mit Fallback für alte Browser

const erzeugeEvent = (type, bubbles = true, cancelable = true) => {
  if (typeof Event === 'function') {
    // Moderner Weg
    return new Event(type, { bubbles, cancelable });
  }
  // Fallback für Internet Explorer
  const event = document.createEvent('Event');
  event.initEvent(type, bubbles, cancelable);
  return event;
};

document.addEventListener('app-bereit', () => console.log('App ist bereit'));
document.dispatchEvent(erzeugeEvent('app-bereit'));

App ist bereit

// Wichtig · Fallstricke

Veraltet: initEvent() ist in der DOM-Spezifikation nur noch aus Kompatibilitätsgründen enthalten. Für neuen Code new Event() bzw. new CustomEvent() verwenden.
Wirkungslos während der Auslösung: Wird die Methode aufgerufen, nachdem dispatchEvent() bereits läuft, passiert nichts. Nach Abschluss der Auslösung kann ein Event allerdings erneut initialisiert und wiederverwendet werden.
Ohne vorherigen Aufruf von initEvent() wirft dispatchEvent() einen InvalidStateError, weil das Event nicht initialisiert ist.
Mit initEvent() ausgelöste Events haben isTrusted === false. Browser führen für solche synthetischen Events meist keine Standardaktionen aus (z. B. öffnet ein künstliches click keine Popups ohne Nutzergeste).
Für spezielle Event-Typen gab es eigene Varianten wie initMouseEvent(), initKeyboardEvent() oder initCustomEvent() – ebenfalls alle veraltet; die jeweiligen Konstruktoren (MouseEvent, KeyboardEvent, CustomEvent) ersetzen sie.
Kompatibilität: in allen Browsern verfügbar, auch in Internet Explorer 9+. Die Event-Konstruktoren fehlen nur im Internet Explorer.

Siehe auch

Document.createEvent() EventTarget.dispatchEvent() Event.preventDefault() Event.bubbles new HashChangeEvent()