Event
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Juli 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 durch APIs generiert werden, um den Fortschritt einer asynchronen Aufgabe darzustellen. Es kann auch programmgesteuert ausgelöst werden, etwa durch den Aufruf der Methode HTMLElement.click() eines Elements oder durch die Definition des Ereignisses und dessen Versand an ein spezifiziertes Ziel mittels EventTarget.dispatchEvent().
Es gibt viele Arten von Ereignissen, von denen einige andere Schnittstellen basierend auf der Hauptschnittstelle Event verwenden. 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 "beobachten") und Code ausführen, um sie zu verarbeiten (oder "handhaben"). Ereignis-Handler werden normalerweise mit verschiedenen HTML-Elementen (wie <button>, <div>, <span>, usw.) verbunden (oder "angehängt"), indem EventTarget.addEventListener() verwendet wird, was im Allgemeinen die alten HTML-Ereignis-Handler-Attribute ersetzt. Solche Handler können, wenn sie richtig hinzugefügt wurden, bei Bedarf auch über removeEventListener() getrennt werden.
Hinweis: Ein Element kann mehrere derartige Handler haben, selbst für genau dasselbe Ereignis—insbesondere, wenn separate, unabhängige Code-Module sie jeweils für eigene Zwecke anhängen. (Zum Beispiel eine Webseite, die ein Werbemodul und ein Statistikmodul enthält, die beide das Ansehen von Videos überwachen.)
Wenn es viele verschachtelte Elemente gibt, die jeweils einen 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 und das Ereignis technisch in beiden auftritt. Die Verarbeitungsreihenfolge solcher Ereignisse hängt von den Event bubbling Einstellungen jedes ausgelösten Handlers ab.
Schnittstellen basierend auf Event
Im Folgenden finden Sie eine Liste der Schnittstellen, die auf der Hauptschnittstelle Event basieren, mit Links zu deren jeweiliger Dokumentation im MDN API Referenz.
Beachten Sie, dass alle Ereignisschnittstellen Namen haben, die mit "Event" enden.
AnimationEventAudioProcessingEventVeraltetBeforeUnloadEventBlobEventClipboardChangeEventClipboardEventCloseEventCompositionEventCustomEventDeviceMotionEventDeviceOrientationEventDragEventErrorEventFetchEventFocusEventFontFaceSetLoadEventFormDataEventGamepadEventHashChangeEventHIDInputReportEventIDBVersionChangeEventInputEventKeyboardEventMediaStreamEventVeraltetMessageEventMouseEventMutationEventVeraltetOfflineAudioCompletionEventPageTransitionEventPaymentRequestUpdateEventPointerEventPopStateEventProgressEventRTCDataChannelEventRTCPeerConnectionIceEventStorageEventSubmitEventTimeEventTouchEventTrackEventTransitionEventUIEventWebGLContextEventWheelEvent
Konstruktor
Event()-
Erstellt ein
Event-Objekt und gibt es an den Aufrufer zurück.
Instanz-Eigenschaften
Event.bubblesSchreibgeschützt-
Ein Boolean-Wert, der angibt, ob das Ereignis durch das DOM nach oben "steigt".
Event.cancelableSchreibgeschützt-
Ein Boolean-Wert, der angibt, ob das Ereignis abgebrochen werden kann.
Event.composedSchreibgeschützt-
Ein Boolean, der angibt, ob das Ereignis über die Grenze zwischen dem Shadow DOM und dem regulären DOM steigen kann.
Event.currentTargetSchreibgeschützt-
Eine Referenz auf das aktuell registrierte Ziel für das Ereignis. Dies ist das Objekt, an das das Ereignis aktuell gesendet werden soll. Es ist möglich, dass dies im Laufe der Zeit durch Retargeting geändert wurde.
Event.defaultPreventedSchreibgeschützt-
Gibt an, ob der Aufruf von
event.preventDefault()das Ereignis abgebrochen hat. Event.eventPhaseSchreibgeschützt-
Gibt an, welche Phase des Ereignisflusses gerade verarbeitet wird. Es ist eine der folgenden Zahlen:
NONE,CAPTURING_PHASE,AT_TARGET,BUBBLING_PHASE. Event.isTrustedSchreibgeschützt-
Gibt an, ob das Ereignis vom Browser (z.B. nach einem Benutzer-Klick) oder durch ein Skript (z.B. unter Verwendung einer Ereigniserstellungsmethode) initiiert wurde.
Event.srcElementSchreibgeschützt Veraltet-
Ein Alias für die
Event.target-Eigenschaft. Verwenden Sie stattdessenEvent.target. Event.targetSchreibgeschützt-
Eine Referenz auf das Objekt, an das das Ereignis ursprünglich gesendet wurde.
Event.timeStampSchreibgeschützt-
Der Zeitpunkt, zu dem das Ereignis erstellt wurde (in Millisekunden). Laut Spezifikation ist dieser Wert die Zeit seit Epoch—aber in der Realität variieren die Definitionen der Browser. Darüber hinaus wird daran gearbeitet, dies stattdessen in einen
DOMHighResTimeStampzu ändern. Event.typeSchreibgeschützt-
Der Name, der den Typ des Ereignisses identifiziert.
Veraltete und nicht standardisierte Eigenschaften
Event.cancelBubbleVeraltet-
Ein historisches Alias zu
Event.stopPropagation(), das stattdessen verwendet werden sollte. Wenn sein Wert vor der Rückgabe von einem Ereignis-Handler auftruegesetzt wird, wird die Verbreitung des Ereignisses verhindert. Event.explicitOriginalTargetNicht standardisiert Schreibgeschützt-
Das explizite ursprüngliche Ziel des Ereignisses.
Event.originalTargetNicht standardisiert Schreibgeschützt-
Das ursprüngliche Ziel des Ereignisses, bevor irgendein Retargeting stattfand.
Event.returnValueVeraltet-
Eine historische Eigenschaft, die immer noch unterstützt wird, um sicherzustellen, dass bestehende Seiten weiterhin funktionieren. Verwenden Sie stattdessen
Event.preventDefault()undEvent.defaultPrevented. Event.scopedSchreibgeschützt Veraltet-
Ein Boolean-Wert, der angibt, ob das gegebene Ereignis durch den Shadow-Root in das Standard-DOM "steigen" 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 der Schatten-Root mit seinem
ShadowRoot.modeim geschlossenen Modus erstellt wurde. Event.preventDefault()-
Hebt das Ereignis (wenn es abbrechbar ist) auf.
Event.stopImmediatePropagation()-
Verhindert speziell für dieses Ereignis, dass alle anderen Listener aufgerufen werden. Dies schließt Listener ein, die an dasselbe Element angehängt sind, sowie solche, die an Elemente angehängt sind, die später durchlaufen werden (z.B. während der Erfassungsphase).
Event.stopPropagation()-
Stoppt die Weiterverbreitung 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 stattdessen den Konstruktor (
Event()).
Spezifikationen
| Specification |
|---|
| DOM> # interface-event> |