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 mit der Maus oder Tippen auf die Tastatur, oder es wird von APIs generiert, um den Fortschritt einer asynchronen Aufgabe darzustellen. Es kann auch programmatisch ausgelöst werden, etwa durch Aufrufen der HTMLElement.click()
-Methode eines Elements oder durch Definieren des Ereignisses und anschließendes Senden an ein bestimmtes Ziel mittels EventTarget.dispatchEvent()
.
Es gibt viele Arten von Ereignissen, von denen einige andere Schnittstellen basierend auf dem Haupt-Event
-Interface verwenden. Event
selbst enthält die Eigenschaften und Methoden, die allen Ereignissen gemeinsam sind.
Viele DOM-Elemente können eingerichtet werden, um diese Ereignisse zu akzeptieren (oder "zu überwachen") und Code auszuführen, um sie zu verarbeiten (oder "zu behandeln"). Ereignis-Handler werden in der Regel mit verschiedenen HTML-Elementen (wie <button>
, <div>
, <span>
, usw.) verbunden (oder "angehängt"), indem EventTarget.addEventListener()
verwendet wird, und dies ersetzt im Allgemeinen die Verwendung der alten HTML-Ereignis-Handler-Attribute. Darüber hinaus können solche Handler, wenn sie ordnungsgemäß hinzugefügt wurden, auch bei Bedarf mit removeEventListener()
getrennt werden.
Hinweis: Ein Element kann mehrere solcher Handler haben, sogar für genau dasselbe Ereignis—insbesondere, wenn separate, unabhängige Code-Module sie anhängen, jedes für seinen eigenen unabhängigen Zweck. (Zum Beispiel eine Webseite mit einem Werbemodul und einem Statistikmodul, die beide das Ansehen von Videos überwachen.)
Wenn es viele verschachtelte Elemente gibt, von denen jedes seine eigenen Handler hat, kann die Ereignisverarbeitung sehr kompliziert werden—insbesondere dort, wo ein übergeordnetes Element dasselbe Ereignis wie seine Kindelemente erhält, da sie sich "räumlich" überlappen, sodass das Ereignis technisch in beiden auftritt, und die Verarbeitungsreihenfolge solcher Ereignisse hängt von den Ereignis-Bubbling-Einstellungen der jeweiligen ausgelösten Handler ab.
Schnittstellen basierend auf Event
Unten finden Sie eine Liste von Schnittstellen, die auf dem Haupt-Event
-Interface basieren, mit Links zu ihrer jeweiligen Dokumentation im MDN API-Referenz.
Beachten Sie, dass alle Ereignis-Schnittstellen mit "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
TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
WebGLContextEvent
WheelEvent
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 blubbert.
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 Schatten-DOM und dem regulären DOM blubbern kann.
Event.currentTarget
Schreibgeschützt-
Eine Referenz 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 sich dies entlang des Weges durch Retargeting geändert hat.
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 Zahlen:
NONE
,CAPTURING_PHASE
,AT_TARGET
,BUBBLING_PHASE
. Event.isTrusted
Schreibgeschützt-
Gibt an, ob das Ereignis vom Browser initiiert wurde (nach einem Benutzerklick, beispielsweise) oder durch ein Skript (mittels einer Ereigniserstellungsmethode, zum Beispiel).
Event.srcElement
Schreibgeschützt Veraltet-
Ein Alias für die
Event.target
-Eigenschaft. Verwenden Sie stattdessenEvent.target
. Event.target
Schreibgeschützt-
Ein Verweis 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 die Zeit seit der Epoche—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.
Veraltete und nicht-standardisierte Eigenschaften
Event.cancelBubble
Veraltet-
Ein historischer Alias zu
Event.stopPropagation()
, der stattdessen verwendet werden sollte. Wenn sein Wert vor der Rückgabe von einem Ereignishandler auftrue
gesetzt wird, wird die Weitergabe 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 es umgeleitet wurde.
Event.returnValue
Veraltet-
Eine historische Eigenschaft, die weiterhin unterstützt wird, um sicherzustellen, dass bestehende Webseiten weiterhin funktionieren. Verwenden Sie stattdessen
Event.preventDefault()
undEvent.defaultPrevented
. Event.scoped
Schreibgeschützt Veraltet-
Ein boolescher Wert, der angibt, ob das gegebene Ereignis über die Schattenwurzel 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 die Schattenwurzel mit ihrem
ShadowRoot.mode
geschlossen erstellt wurde. Event.preventDefault()
-
Bricht das Ereignis ab (falls es abbrechbar ist).
Event.stopImmediatePropagation()
-
Verhindert für dieses spezielle Ereignis, dass alle anderen Listener aufgerufen werden. Dies schließt Listener ein, die an demselben Element angehängt sind, sowie solche, die an Elementen angehängt sind, die später durchlaufen werden (beispielsweise während der Erfassungsphase).
Event.stopPropagation()
-
Stoppt die Weitergabe von Ereignissen im DOM.
Veraltete Methoden
Event.initEvent()
Veraltet-
Initialisiert den Wert eines erstellten Ereignisses. Wenn das Ereignis bereits gesendet wurde, tut diese Methode nichts. Verwenden Sie den Konstruktor (
Event()
stattdessen).
Spezifikationen
Specification |
---|
DOM # interface-event |
Browser-Kompatibilität
Siehe auch
- Verfügbare Arten von Ereignissen: Ereignis-Referenz
- Einführung in Ereignisse lernen
- Ereignis-Bubbling lernen
- Erstellen und Auslösen von benutzerdefinierten Ereignissen