Event

Baseline Widely available

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

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Das Event-Interface 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 Drücken der Tastatur, oder von APIs generiert werden, um den Fortschritt einer asynchronen Aufgabe darzustellen. Es kann auch programmatisch ausgelöst werden, z.B. durch Aufrufen der Methode HTMLElement.click() eines Elements oder durch Definieren des Ereignisses, das dann mit EventTarget.dispatchEvent() an ein bestimmtes Ziel gesendet wird.

Es gibt viele Arten von Ereignissen, einige davon verwenden basierend auf dem Haupt-Event-Interface andere Schnittstellen. Event selbst enthält die Eigenschaften und Methoden, die allen Ereignissen gemeinsam sind.

Viele DOM-Elemente können so eingerichtet werden, dass sie diese Ereignisse akzeptieren (oder "darauf hören") und Code ausführen, um sie zu verarbeiten (oder "zu behandeln"). Ereignis-Handler werden in der Regel mit verschiedenen HTML-Elementen (wie <button>, <div>, <span>, usw.) über EventTarget.addEventListener() verbunden (oder "angehängt"), und dies ersetzt im Allgemeinen die Verwendung der alten HTML-Ereignis-Handler-Attribute. Wenn sie richtig hinzugefügt werden, können solche Handler bei Bedarf auch mit removeEventListener() wieder getrennt werden.

Hinweis: Ein Element kann mehrere solcher Handler haben, sogar für dasselbe Ereignis—besonders wenn separate, unabhängige Code-Module sie jeweils zu ihren eigenen unabhängigen Zwecken anhängen. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodul, die beide Videoanschauungen überwachen.)

Wenn es viele verschachtelte Elemente gibt, die jeweils ihre eigenen Handler haben, kann die Ereignisverarbeitung sehr kompliziert werden—insbesondere wenn ein übergeordnetes Element dasselbe Ereignis wie seine Kindelemente empfängt, weil sie "räumlich" überlappen, sodass das Ereignis technisch in beiden auftritt, und die Verarbeitungsreihenfolge solcher Ereignisse hängt von den Event-Bubbling-Einstellungen jedes ausgelösten Handlers ab.

Schnittstellen basierend auf Event

Unten ist eine Liste von Schnittstellen, die auf dem Haupt-Event-Interface basieren, mit Links zu den jeweiligen Dokumentationen in der MDN API-Referenz.

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

Konstruktor

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

Instanz-Eigenschaften

Event.bubbles Schreibgeschützt: Ein boolescher Wert, der angibt, ob das Ereignis durch das DOM nach oben steigt.
Event.cancelable Schreibgeschützt: Ein boolescher Wert, der angibt, ob das Ereignis abgebrochen werden kann.
Event.composed Schreibgeschützt: Ein boolescher Wert, der angibt, ob das Ereignis über die Grenze zwischen dem Shadow DOM und dem regulären DOM steigen kann.
Event.currentTarget Schreibgeschützt: Eine Referenz auf das aktuell registrierte Ziel für das Ereignis. Dies ist das Objekt, an das das Ereignis derzeit gesendet werden soll. Es ist möglich, dass dies im Laufe der Retargeting geändert wurde.
Event.defaultPrevented Schreibgeschützt: Gibt an, ob der Aufruf von event.preventDefault() das Ereignis abgebrochen hat.
Event.eventPhase Schreibgeschützt: Gibt an, welche Phase des Ereignisverlaufs gerade verarbeitet wird. Es ist eine der folgenden Zahlen: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
Event.isTrusted Schreibgeschützt: Gibt an, ob das Ereignis vom Browser initiiert wurde (nach einem Benutzerklick, zum Beispiel) oder durch ein Skript (z.B. unter Verwendung einer Ereignis-Erstellungsmethode).
Event.srcElement Schreibgeschützt Veraltet: Ein Alias für die Event.target-Eigenschaft. Verwenden Sie stattdessen Event.target.
Event.target Schreibgeschützt: Eine Referenz auf das Objekt, an das das Ereignis ursprünglich gesendet wurde.
Event.timeStamp Schreibgeschützt: Die Zeit, zu der das Ereignis erstellt wurde (in Millisekunden). Laut Spezifikation ist dieser Wert seit dem Epochenbeginn—aber in Wirklichkeit variieren die Definitionen der Browser. Darüber hinaus wird daran gearbeitet, dies stattdessen in einen DOMHighResTimeStamp zu ändern.
Event.type Schreibgeschützt: Der Name, der den Typ des Ereignisses identifiziert.

Legacy- und nicht-standardisierte Eigenschaften

Event.cancelBubble Veraltet: Ein historischer Alias zu Event.stopPropagation(), der stattdessen verwendet werden sollte. Wenn sein Wert auf true gesetzt wird, bevor von einem Ereignis-Handler zurückgekehrt wird, wird die Ausbreitung des Ereignisses verhindert.
Event.explicitOriginalTarget Nicht standardisiert Schreibgeschützt: Das explizite ursprüngliche Ziel des Ereignisses.
Event.originalTarget Nicht standardisiert Schreibgeschützt: Das ursprüngliche Ziel des Ereignisses, bevor irgendwelche Retargetings stattfanden.
Event.returnValue Veraltet: Eine historische Eigenschaft, die weiterhin unterstützt wird, um sicherzustellen, dass bestehende Websites weiterhin funktionieren. Verwenden Sie Event.preventDefault() und Event.defaultPrevented stattdessen.
Event.scoped Schreibgeschützt Veraltet: Ein boolescher Wert, der angibt, ob das gegebene Ereignis über die Shadow-Root hinaus bis zum standardmäßigen DOM ansteigen wird. Verwenden Sie composed stattdessen.

Instanz-Methoden

Event.composedPath(): Gibt den Ereignispfad 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 geschlossen erstellt wurde.
Event.preventDefault(): Hebt das Ereignis auf (wenn es abgebrochen werden kann).
Event.stopImmediatePropagation(): Verhindert für dieses bestimmte Ereignis, dass andere Listener aufgerufen werden. Dies schließt Listener ein, die an dasselbe Element sowie an Elemente angehängt sind, die später (zum Beispiel während der Capture-Phase) durchlaufen werden.
Event.stopPropagation(): Stoppt die weitere Ausbreitung von Ereignissen im DOM.

Veraltete Methoden

Event.initEvent() Veraltet: Initialisiert den Wert eines erstellten Events. Wenn das Ereignis bereits gesendet wurde, bewirkt diese Methode nichts. Verwenden Sie stattdessen den Konstruktor (Event()).

Spezifikationen

Specification
DOM # interface-event