new Event() — Methode · JavaScript-Referenz

Signatur

new Event(type, options)

Beschreibung

Mit new Event() erzeugt man eigene (synthetische) Ereignisse. Sie werden anschließend mit target.dispatchEvent(event) an ein beliebiges EventTarget gesendet, also an DOM-Elemente, window, document oder eigene Unterklassen von EventTarget. Dort registrierte Listener werden synchron aufgerufen, noch bevor dispatchEvent() zurückkehrt.

Typische Einsatzzwecke sind die lose Kopplung von Komponenten (z. B. ein Widget meldet "ready"), das Simulieren von Ereignissen in Tests oder das Auslösen von Standard-Ereignissen wie input oder change, nachdem ein Formularwert per Skript geändert wurde, damit Frameworks die Änderung mitbekommen.

Standardmäßig steigt ein so erzeugtes Ereignis nicht im DOM-Baum auf (bubbles: false) und lässt sich nicht abbrechen (cancelable: false). Beides muss man über das options-Objekt ausdrücklich einschalten. Wer zusätzliche Daten mitschicken will, sollte stattdessen CustomEvent mit der Eigenschaft detail nutzen oder eine eigene Unterklasse von Event anlegen.

Parameter

Name	Typ	Default	Beschreibung
$type Pflicht	string		Name des Ereignisses, z. B. `"click"`, `"input"` oder ein eigener Name wie `"cart:updated"`. Groß- und Kleinschreibung wird unterschieden.
$options	object	{}	Optionales Konfigurationsobjekt (`EventInit`) mit folgenden Eigenschaften: `bubbles` (`boolean`, Standard `false`): ob das Ereignis im DOM-Baum aufsteigt. `cancelable` (`boolean`, Standard `false`): ob sich das Ereignis mit `preventDefault()` abbrechen lässt. `composed` (`boolean`, Standard `false`): ob das Ereignis die Grenze eines Shadow-DOM nach außen überschreitet.

Rückgabewert

Typ

Event

Beschreibung

Ein neues Event-Objekt mit isTrusted === false, das noch nicht ausgelöst wurde.

Beispiele

Eigenes Ereignis erzeugen und auslösen

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

button.addEventListener('ready', (event) => {
  console.log(`Ereignis: ${event.type}, vertrauenswürdig: ${event.isTrusted}`);
});

const readyEvent = new Event('ready');
button.dispatchEvent(readyEvent);

Ereignis: ready, vertrauenswürdig: false

Aufsteigendes, abbrechbares Ereignis mit Event-Delegation

const list = document.createElement('ul');
const item = document.createElement('li');
list.append(item);

// Listener am Elternelement fängt aufsteigende Ereignisse ab
list.addEventListener('remove-request', (event) => {
  if (!confirm('Eintrag wirklich löschen?')) {
    event.preventDefault();
  }
});

const event = new Event('remove-request', { bubbles: true, cancelable: true });
// dispatchEvent liefert false, wenn preventDefault() aufgerufen wurde
const allowed = item.dispatchEvent(event);

if (allowed) {
  item.remove();
  console.log('Eintrag gelöscht');
} else {
  console.log('Löschen abgebrochen');
}

Eintrag gelöscht // bzw. "Löschen abgebrochen"

Frameworks über programmatische Wertänderung informieren

const input = document.querySelector('#email');

// Wert per Skript setzen – löst von sich aus KEIN input-Ereignis aus
input.value = 'max@example.com';

// Ereignisse manuell auslösen, damit Listener/Frameworks reagieren
input.dispatchEvent(new Event('input', { bubbles: true }));
input.dispatchEvent(new Event('change', { bubbles: true }));

Eigener EventTarget ohne DOM (auch in Node.js)

class Timer extends EventTarget {
  start(ms) {
    setTimeout(() => this.dispatchEvent(new Event('done')), ms);
  }
}

const timer = new Timer();
timer.addEventListener('done', () => console.log('Timer abgelaufen'), { once: true });
timer.start(500);

Timer abgelaufen

// Wichtig · Fallstricke

Kein Aufsteigen per Standard: Ohne { bubbles: true } erreichen Ereignisse keine Listener an Elternelementen. Event-Delegation funktioniert dann nicht.
preventDefault() wirkungslos: Ohne cancelable: true wird der Aufruf still ignoriert, und defaultPrevented bleibt false.
Keine Standardaktion: Ein synthetisches new Event('click') löst zwar Listener aus, aber keine Browser-Standardaktionen wie das Folgen eines Links oder das Absenden eines Formulars. Dafür element.click() bzw. form.requestSubmit() verwenden. Wegen isTrusted === false öffnen solche Ereignisse auch keine Pop-ups und starten weder Vollbild noch Medienwiedergabe.
Synchrone Ausführung: dispatchEvent() ruft alle Listener sofort auf. Ausnahmen in Listenern werden gemeldet, brechen den Aufrufer aber nicht ab.
Nicht wiederverwendbar während der Auslösung: Ein Ereignis, das gerade ausgelöst wird, kann man nicht erneut senden (InvalidStateError). Am besten für jede Auslösung ein neues Objekt erzeugen.
Zusätzliche Daten: Dafür CustomEvent mit detail nutzen oder eine eigene Unterklasse von Event anlegen. Für Maus- oder Tastaturdaten gibt es MouseEvent, KeyboardEvent usw.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Internet Explorer kennt den Konstruktor nicht, dort war das veraltete document.createEvent() + initEvent() nötig. In Node.js ist Event seit Version 15 global verfügbar.

Siehe auch

Event new UIEvent() new Text() new BlobEvent() new Comment()