UIEvent.initUIEvent() — Methode · JavaScript-Referenz

Signatur

UIEvent.prototype.initUIEvent(type, canBubble, cancelable, view, detail)

Beschreibung

initUIEvent() stammt aus der Zeit vor den Event-Konstruktoren: Man hat mit document.createEvent("UIEvent") ein leeres, nicht initialisiertes Event-Objekt erzeugt und es dann mit dieser Methode konfiguriert. Erst danach ließ es sich per dispatchEvent() auslösen.

Die Methode legt den Event-Typ (z. B. "resize" oder einen eigenen Namen) fest, außerdem, ob das Event im DOM nach oben aufsteigt (bubbling) und ob es abbrechbar ist. Dazu kommen das zugehörige Window (view) und ein numerischer detail-Wert, bei Mausereignissen etwa die Klickanzahl.

Die Methode ist veraltet. In neuem Code verwendet man den Konstruktor new UIEvent(type, options). Er ist kürzer, besser lesbar und erzeugt das Event in einem Schritt. initUIEvent() kann also höchstens noch in Altcode auftauchen oder bei Polyfills für sehr alte Umgebungen.

Wird initUIEvent() auf einem Event aufgerufen, das bereits ausgelöst wird (also mitten im Dispatch), hat der Aufruf keine Wirkung.

Parameter

Name	Typ	Beschreibung
$type Pflicht	string	Der Event-Typ, z. B. `"resize"`, `"scroll"` oder ein eigener Name.
$canBubble Pflicht	boolean	Gibt an, ob das Event im DOM-Baum nach oben aufsteigt. Wird später über `event.bubbles` ausgelesen.
$cancelable Pflicht	boolean	Gibt an, ob die Standardaktion per `preventDefault()` verhindert werden kann (`event.cancelable`).
$view Pflicht	Window \| null	Das `Window`, zu dem das Event gehört, meist `window`. Später über `event.view` verfügbar.
$detail Pflicht	number	Ein numerischer Zusatzwert, abhängig vom Event-Typ (z. B. die Klickanzahl). Wird über `event.detail` ausgelesen.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Die Methode verändert das Event-Objekt direkt.

Beispiele

Altstil: UIEvent erzeugen, initialisieren und auslösen

const box = document.createElement('div');
document.body.append(box);

box.addEventListener('panelresize', (e) => {
  console.log(e.type, e.bubbles, e.cancelable, e.view === window, e.detail);
});

// Veraltete Variante: erst erzeugen, dann initialisieren
const evt = document.createEvent('UIEvent');
evt.initUIEvent('panelresize', true, false, window, 3);
box.dispatchEvent(evt);

panelresize true false true 3

Moderne Entsprechung mit dem UIEvent-Konstruktor

const box = document.createElement('div');
document.body.append(box);

box.addEventListener('panelresize', (e) => {
  console.log(e.type, e.bubbles, e.detail);
});

// Empfohlen: alles in einem Schritt
const evt = new UIEvent('panelresize', {
  bubbles: true,
  cancelable: false,
  view: window,
  detail: 3
});
box.dispatchEvent(evt);

panelresize true 3

Hilfsfunktion mit Rückfall für sehr alte Umgebungen

const createUIEvent = (type, { bubbles = false, cancelable = false, view = window, detail = 0 } = {}) => {
  try {
    return new UIEvent(type, { bubbles, cancelable, view, detail });
  } catch {
    // Rückfall, falls der Konstruktor fehlt (z. B. Internet Explorer)
    const evt = document.createEvent('UIEvent');
    evt.initUIEvent(type, bubbles, cancelable, view, detail);
    return evt;
  }
};

document.addEventListener('refresh', (e) => console.log('Detail:', e.detail));
document.dispatchEvent(createUIEvent('refresh', { bubbles: true, detail: 42 }));

Detail: 42

// Wichtig · Fallstricke

Veraltet: Die Methode ist nur noch aus Kompatibilitätsgründen in der Spezifikation enthalten. Verwende stattdessen new UIEvent(). Alle modernen Browser unterstützen ihn, nur der Internet Explorer nicht.
Alle fünf Parameter solltest du immer angeben. Ältere Implementierungen werfen einen Fehler oder setzen unerwartete Werte, wenn Argumente fehlen.
Ein Aufruf während des Dispatch hat keine Wirkung. Auch auf ein Event, das bereits ausgelöst wurde, sollte man ihn nicht anwenden, sondern ein neues Event erzeugen.
Künstlich ausgelöste Events haben event.isTrusted === false. Sie lösen keine Standardaktionen des Browsers aus, etwa eine echte Größenänderung.
Für eigene Anwendungs-Events mit beliebigen Daten eignet sich CustomEvent mit der Option detail besser als UIEvent.

Siehe auch

UIEvent Document.createEvent() Event.initEvent() EventTarget.dispatchEvent() CustomEvent new InterestEvent()