Event

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

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 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 Aufruf der HTMLElement.click()-Methode eines Elements oder durch Definition des Ereignisses, gefolgt vom Senden an ein bestimmtes Ziel mit EventTarget.dispatchEvent().

Es gibt viele Arten von Ereignissen, von denen einige andere Schnittstellen nutzen, die auf der Hauptschnittstelle Event basieren. 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 lauschen") und Code als Antwort ausführen, um sie zu verarbeiten (oder "zu handhaben"). Ereignishandler werden normalerweise an verschiedene HTML-Elemente (wie <button>, <div>, <span> usw.) mit EventTarget.addEventListener() verbunden (oder "angefügt"), und dies ersetzt im Allgemeinen die Verwendung der alten HTML-Ereignishandler-Attribute. Zudem können diese Handler, wenn sie ordnungsgemäß hinzugefügt wurden, bei Bedarf auch mit removeEventListener() getrennt werden.

Hinweis: Ein Element kann mehrere solche Handler haben, selbst für dasselbe Ereignis – insbesondere, wenn unabhängige Codemodule sie anfügen, jedes für eigene unabhängige Zwecke. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodul, die beide das Ansehen von Videos überwachen.)

Wenn es viele verschachtelte Elemente gibt, die jeweils eigene Handler haben, kann die Ereignisverarbeitung sehr kompliziert werden – insbesondere, wenn ein Elternelement dasselbe Ereignis wie seine Kindelemente erhält, weil sie sich "räumlich" überlappen und das Ereignis technisch gesehen in beiden auftritt, und die Verarbeitungsreihenfolge solcher Ereignisse von den Ereignis-Bubbling-Einstellungen jedes ausgelösten Handlers abhängt.

Schnittstellen basierend auf Event

Unten ist eine Liste von Schnittstellen, die auf der Hauptschnittstelle Event basieren, mit Links zu ihrer jeweiligen Dokumentation im MDN API-Referenz.

Beachten Sie, dass alle Ereignisschnittstellen 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 blubbert oder nicht.
Event.cancelable Schreibgeschützt: Ein boolescher Wert, der angibt, ob das Ereignis abgebrochen werden kann.
Event.composed Schreibgeschützt: Ein Boolescher, der angibt, ob das Ereignis über die Grenze zwischen dem Shadow DOM und dem regulären DOM blubbern kann.
Event.currentTarget Schreibgeschützt: Ein Verweis auf das derzeit registrierte Ziel für das Ereignis. Dies ist das Objekt, an das das Ereignis aktuell gesendet werden soll. Es ist möglich, dass dies durch 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 Ereignisflusses gerade verarbeitet wird. Es ist eine der folgenden Nummern: NONE, CAPTURING_PHASE, AT_TARGET, BUBBLING_PHASE.
Event.isTrusted Schreibgeschützt: Gibt an, ob das Ereignis vom Browser initiiert wurde (zum Beispiel nach einem Benutzerklick) oder durch ein Skript (zum Beispiel durch eine Ereigniserstellungs-Methode).
Event.srcElement Schreibgeschützt: Ein Alias für die Event.target-Eigenschaft. Verwenden Sie stattdessen Event.target.
Event.target Schreibgeschützt: Ein Verweis auf das Objekt, an das das Ereignis ursprünglich gesendet wurde.
Event.timeStamp Schreibgeschützt: Ein DOMHighResTimeStamp, der die Zeit, zu der das Ereignis erstellt wurde, darstellt, gemessen in Millisekunden relativ zur Zeitursprung des entsprechenden globalen Objekts.
Event.type Schreibgeschützt: Der Name, der den Typ des Ereignisses identifiziert.

Veraltete und nicht standardisierte Eigenschaften

Event.cancelBubble: Ein historischer Alias für Event.stopPropagation(), der stattdessen verwendet werden sollte. Wenn der Wert dieses Properties auf true gesetzt wird, bevor ein Ereignishandler verlassen wird, verhindert dies die Weitergabe des Ereignisses.
Event.explicitOriginalTarget Schreibgeschützt: Das explizite ursprüngliche Ziel des Ereignisses.
Event.originalTarget Schreibgeschützt: Das ursprüngliche Ziel des Ereignisses, vor irgendwelchen Retargetings.
Event.returnValue: Ein historisches Property, das immer noch unterstützt wird, um sicherzustellen, dass bestehende Websites weiterhin funktionieren. Verwenden Sie stattdessen Event.preventDefault() und Event.defaultPrevented.
Event.scoped Schreibgeschützt: Ein boolescher Wert, der angibt, ob das gegebene Ereignis über das Shadow Root in den Standard-DOM blubbern 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 Schattenbäumen ein, wenn das Schatten-Root mit seinem ShadowRoot.mode geschlossen erstellt wurde.
Event.preventDefault(): Bricht das Ereignis ab (wenn es abbrechbar ist).
Event.stopImmediatePropagation(): Verhindert, dass für dieses bestimmte Ereignis andere Listener aufgerufen werden. Dies schließt Listener ein, die am gleichen Element angehängt sind, sowie solche, die an Elementen angehängt sind, die später durchlaufen werden (während der Capture-Phase zum Beispiel).
Event.stopPropagation(): Stoppt die Weitergabe von Ereignissen im DOM.

Veraltete Methoden

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

Spezifikationen

Spezifikation
DOM # interface-event

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden