Event
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.
AnimationEvent
AudioProcessingEvent
VeraltetBeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CustomEvent
DeviceMotionEvent
DeviceOrientationEvent
DragEvent
ErrorEvent
FetchEvent
FocusEvent
FontFaceSetLoadEvent
FormDataEvent
GamepadEvent
HashChangeEvent
HIDInputReportEvent
IDBVersionChangeEvent
InputEvent
KeyboardEvent
MediaStreamEvent
VeraltetMessageEvent
MouseEvent
MutationEvent
VeraltetOfflineAudioCompletionEvent
PageTransitionEvent
PaymentRequestUpdateEvent
PointerEvent
PopStateEvent
ProgressEvent
RTCDataChannelEvent
RTCPeerConnectionIceEvent
StorageEvent
SubmitEvent
SVGEvent
VeraltetTimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
WebGLContextEvent
WheelEvent
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 Veraltet-
Ein Alias für die Eigenschaft
Event.target
. Verwenden Sie stattdessenEvent.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
Veraltet-
Ein historischer Alias für
Event.stopPropagation()
, der stattdessen verwendet werden sollte. Wenn sein Wert vor der Rückkehr aus einem Ereignis-Handler auftrue
gesetzt wird, verhindert dies die Weiterverbreitung des Ereignisses. Event.explicitOriginalTarget
Nicht standardisiert Nur lesbar-
Das explizite ursprüngliche Ziel des Ereignisses.
Event.originalTarget
Nicht standardisiert Nur lesbar-
Das ursprüngliche Ziel des Ereignisses, bevor irgendwelche Retargetings stattgefunden haben.
Event.returnValue
Veraltet-
Eine historische Eigenschaft, die immer noch unterstützt wird, um sicherzustellen, dass bestehende Sites weiterhin funktionieren. Verwenden Sie
Event.preventDefault()
undEvent.defaultPrevented
stattdessen. Event.scoped
Nur lesbar Veraltet-
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()
Veraltet-
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
- Verfügbare Arten von Ereignissen: Ereignisreferenz
- Einführung in Ereignisse
- Event bubbling
- Erstellen und Auslösen benutzerdefinierter Ereignisse