Event

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2021.

Hinweis: Dieses Feature ist verfügbar in Web Workers.

Die Event-Schnittstelle repräsentiert ein Ereignis, das auf einem EventTarget stattfindet.

Ein Ereignis kann durch eine Benutzeraktion ausgelöst werden, z. B. durch Klicken der Maustaste oder Tippen auf die Tastatur, oder durch APIs generiert werden, um den Fortschritt einer asynchronen Aufgabe darzustellen. Es kann auch programmgesteuert ausgelöst werden, z. B. durch Aufrufen der HTMLElement.click()-Methode eines Elements oder durch Definieren des Ereignisses und anschließendes Senden an ein bestimmtes Ziel mit EventTarget.dispatchEvent().

Es gibt viele Arten von Ereignissen, von denen einige andere Schnittstellen verwenden, die auf der Hauptschnittstelle Event basieren. Event selbst enthält die Eigenschaften und Methoden, die für alle Ereignisse üblich sind.

Viele DOM-Elemente können so eingerichtet werden, dass sie diese Ereignisse entgegennehmen (oder "abhören") und Code als Reaktion darauf ausführen, um sie zu verarbeiten (oder "handhaben"). Ereignis-Handler werden normalerweise an verschiedene HTML-Elemente (wie <button>, <div>, <span> usw.) mit EventTarget.addEventListener() angeschlossen, was allgemein die Verwendung der alten HTML-Ereignis-Handler-Attribute ersetzt. Darüber hinaus können solche Handler bei Bedarf auch mit removeEventListener() getrennt werden, wenn sie ordnungsgemäß hinzugefügt wurden.

Hinweis: Ein Element kann mehrere solcher Handler haben, sogar für genau dasselbe Ereignis – insbesondere, wenn separate, unabhängige Code-Module sie anschließen, jeweils für ihre eigenen unabhängigen Zwecke. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodul, die beide die Videoansicht überwachen.)

Wenn es viele verschachtelte Elemente gibt, die jeweils über ihren eigenen Handler verfügen, kann die Ereignisverarbeitung sehr komplex werden – insbesondere wenn ein übergeordnetes Element dasselbe Ereignis wie seine untergeordneten Elemente erhält, da sie "räumlich" überlappen und das Ereignis technisch in beiden auftritt. Die Reihenfolge der Verarbeitung solcher Ereignisse hängt von den Event bubbling-Einstellungen der einzelnen ausgelösten Handler ab.

Schnittstellen basierend auf Event

Nachfolgend finden Sie eine Liste von Schnittstellen, die auf der Hauptschnittstelle Event basieren, mit Links zu ihrer jeweiligen Dokumentation in der MDN API-Referenz.

Beachten Sie, dass alle Ereignis-Schnittstellen Namen haben, die auf "Event" enden.

Konstruktor

Event()

Erstellt ein Event-Objekt und gibt es an den Aufrufer zurück.

Instanz-Eigenschaften

Event.bubbles Nur lesbar

Ein boolescher Wert, der angibt, ob das Ereignis durch das DOM nach oben blubbert.

Event.cancelable Nur lesbar

Ein boolescher Wert, der angibt, ob das Ereignis abgebrochen werden kann.

Event.composed Nur lesbar

Ein boolescher Wert, der angibt, ob das Ereignis die Grenze zwischen dem Shadow DOM und dem normalen DOM aufblubbern kann.

Event.currentTarget Nur lesbar

Eine Referenz auf das aktuell registrierte Ziel für das Ereignis. Dies ist das Objekt, an das das Ereignis gerade gesendet werden soll. Es ist möglich, dass sich dies durch Retargeting geändert hat.

Event.defaultPrevented Nur lesbar

Gibt an, ob der Aufruf von event.preventDefault() das Ereignis abgebrochen hat.

Event.eventPhase Nur lesbar

Gibt an, welche Phase des Ereignis-Flows gerade verarbeitet wird. Es ist eine der folgenden Zahlen: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.

Event.isTrusted Nur lesbar

Gibt an, ob das Ereignis vom Browser initiiert wurde (nach einem Benutzer-Klick, zum Beispiel) oder durch ein Skript (unter Verwendung einer Ereigniserstellungsmethode, zum Beispiel).

Event.srcElement Nur lesbar

Ein Alias für die Eigenschaft Event.target. Verwenden Sie stattdessen Event.target.

Event.target Nur lesbar

Eine Referenz auf das Objekt, an das das Ereignis ursprünglich gesendet wurde.

Event.timeStamp Nur lesbar

Der Zeitpunkt, zu dem das Ereignis erstellt wurde (in Millisekunden). Laut Spezifikation ist dieser Wert die Zeit seit dem Epochenanfang – in der Realität variieren jedoch die Definitionen der Browser. Zudem wird daran gearbeitet, dies in einen DOMHighResTimeStamp zu ändern.

Event.type Nur lesbar

Der Name, der den Typ des Ereignisses identifiziert.

Veraltete und nicht standardmäßige Eigenschaften

Event.cancelBubble

Ein historischer Alias für Event.stopPropagation(), der stattdessen verwendet werden sollte. Wenn sein Wert vor der Rückkehr aus einem Ereignis-Handler auf true gesetzt wird, verhindert dies die Weiterverbreitung des Ereignisses.

Event.explicitOriginalTarget Nur lesbar

Das explizite ursprüngliche Ziel des Ereignisses.

Event.originalTarget Nur lesbar

Das ursprüngliche Ziel des Ereignisses, bevor irgendwelche Retargetings stattgefunden haben.

Event.returnValue

Eine historische Eigenschaft, die immer noch unterstützt wird, um sicherzustellen, dass bestehende Sites weiterhin funktionieren. Verwenden Sie Event.preventDefault() und Event.defaultPrevented stattdessen.

Event.scoped Nur lesbar

Ein boolescher Wert, der anzeigt, ob das gegebene Ereignis durch den Shadow Root in das Standard-DOM aufblubbern wird. Verwenden Sie stattdessen composed.

Instanz-Methoden

Event.composedPath()

Gibt den Pfad des Ereignisses zurück (ein Array von Objekten, auf denen Listener aufgerufen werden). Dies schließt keine Knoten in Shadow-Bäumen ein, wenn die Shadow Root mit ihrem ShadowRoot.mode im geschlossenen Modus erstellt wurde.

Event.preventDefault()

Bricht das Ereignis ab (falls es abbrechbar ist).

Event.stopImmediatePropagation()

Verhindert für dieses bestimmte Ereignis, dass alle anderen Listener aufgerufen werden. Dies schließt Listener ein, die am gleichen Element angefügt sind sowie jene, die an Elementen angefügt sind, die später durchlaufen werden (während der Erfassungsphase zum Beispiel).

Event.stopPropagation()

Stoppt die Weiterverbreitung von Ereignissen weiter im DOM.

Veraltete Methoden

Event.initEvent()

Initialisiert den Wert eines erzeugten Ereignisses. Wenn das Ereignis bereits gesendet wurde, tut diese Methode nichts. Verwenden Sie den Konstruktor (Event() stattdessen).

Spezifikationen

Specification
DOM Standard
# interface-event

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch