DOM-Ereignisse

Ereignisse werden ausgelöst, um Code über "interessante Änderungen" zu benachrichtigen, die die Ausführung des Codes beeinflussen können. Diese können durch Benutzerinteraktionen wie zum Beispiel die Verwendung einer Maus oder das Ändern der Fenstergröße entstehen, durch Änderungen im Zustand der zugrunde liegenden Umgebung (z. B. niedriger Batteriestand oder Medienereignisse vom Betriebssystem) und andere Ursachen.

Jedes Ereignis wird durch ein Objekt repräsentiert, das auf der Event-Schnittstelle basiert und zusätzlich benutzerdefinierte Felder und/oder Funktionen haben kann, um Informationen über das Geschehen bereitzustellen. Die Dokumentation zu jedem Ereignis enthält eine Tabelle (in der Nähe der Spitze), die einen Link zur zugehörigen Ereignisschnittstelle und andere relevante Informationen enthält. Eine vollständige Liste der verschiedenen Ereignistypen finden Sie unter Event > Interfaces based on Event.

Dieses Thema bietet einen Index zu den Hauptarten von Ereignissen, die Sie interessieren könnten (Animation, Zwischenablage, Workers usw.), zusammen mit den Hauptklassen, die diese Arten von Ereignissen implementieren.

Ereignisindex

Ereignistyp	Beschreibung	Dokumentation
Animation	Ereignisse im Zusammenhang mit der Web Animation API. Werden verwendet, um auf Statusänderungen in Animationen zu reagieren (z. B. wenn eine Animation beginnt oder endet).	Animationsereignisse, die auf `Document`, `Window`, `HTMLElement` ausgelöst werden.
Asynchroner Datenabruf	Ereignisse im Zusammenhang mit dem Abrufen von Daten.	Ereignisse, die auf `AbortSignal`, `XMLHttpRequest`, `FileReader` ausgelöst werden.
Zwischenablage	Ereignisse im Zusammenhang mit der Clipboard API. Werden verwendet, um zu benachrichtigen, wenn Inhalte ausgeschnitten, kopiert oder eingefügt werden.	Ereignisse, die auf `Document`, `Element`, `Window` ausgelöst werden.
Komposition	Ereignisse im Zusammenhang mit der Komposition; Eingabe von Text "indirekt" (anstelle der üblichen Tastaturanschläge). Zum Beispiel, Text, der über eine Sprache-zu-Text-Engine eingegeben wird oder durch spezielle Tastenkombinationen, die Tastatureingaben modifizieren, um neue Zeichen in einer anderen Sprache darzustellen.	Ereignisse, die auf `Element` ausgelöst werden.
CSS-Übergang	Ereignisse im Zusammenhang mit CSS-Übergängen. Stellt Benachrichtigungsereignisse bereit, wenn CSS-Übergänge beginnen, enden, abgebrochen werden usw.	Ereignisse, die auf `Document`, `HTMLElement`, `Window` ausgelöst werden.
Datenbank	Ereignisse im Zusammenhang mit Datenbankoperationen: Öffnen, Schließen, Transaktionen, Fehler usw.	Ereignisse, die auf `IDBDatabase`, `IDBOpenDBRequest`, `IDBRequest`, `IDBTransaction` ausgelöst werden.
DOM-Veränderung	Ereignisse im Zusammenhang mit Änderungen an der Document Object Model (DOM)-Hierarchie und -Knoten.	Warnung: Mutationsereignisse sind veraltet. Stattdessen sollten Mutationsbeobachter verwendet werden.
Drag'n'drop, Rad	Ereignisse im Zusammenhang mit der Verwendung der HTML Drag and Drop API und Radereignisse. Zieh- und Radereignisse sind von Mausereignissen abgeleitet. Während sie ausgelöst werden, wenn ein Mausrad oder Drag/Drop verwendet wird, können sie auch mit anderer geeigneter Hardware verwendet werden.	Ziehereignisse, die auf `Document` ausgelöst werden. Radereignisse, die auf `Element` ausgelöst werden.
Fokus	Ereignisse im Zusammenhang mit dem Fokuserhalt und -verlust von Elementen.	Ereignisse, die auf `Element`, `Window` ausgelöst werden.
Formular	Ereignisse im Zusammenhang mit dem Aufbau, Zurücksetzen und Abschicken von Formularen.	Ereignisse, die auf `HTMLFormElement` ausgelöst werden.
Vollbild	Ereignisse im Zusammenhang mit der Fullscreen API. Werden verwendet, um zu benachrichtigen, wenn zwischen Vollbild- und Fenstermodus gewechselt wird, sowie über Fehler, die während dieses Wechsels auftreten.	Ereignisse, die auf `Document`, `Element` ausgelöst werden.
Gamepad	Ereignisse im Zusammenhang mit der Gamepad API.	Ereignisse, die auf `Window` ausgelöst werden.
Gesten	Touch-Ereignisse werden empfohlen, um Gesten zu implementieren.	Ereignisse, die auf `Document`, `Element` ausgelöst werden. Zusätzlich gibt es eine Reihe nicht-standardmäßiger Gestenereignisse: WebKit-spezifische, nicht-standardmäßige Ereignisse auf `Element`: `gesturestart`-Ereignis, `gesturechange`-Ereignis, `gestureend`-Ereignis.
Verlauf	Ereignisse im Zusammenhang mit der History API.	Ereignisse, die auf `Window` ausgelöst werden.
Inhaltverwaltungsanzeige von HTML-Elementen	Ereignisse im Zusammenhang mit dem Ändern des Zustands eines Anzeige- oder Textelements.	Ereignisse, die auf `HTMLDetailsElement`, `HTMLDialogElement`, `HTMLSlotElement` ausgelöst werden.
Eingaben	Ereignisse im Zusammenhang mit HTML-Eingabeelementen z.B. `<input>`, `<select>`, oder `<textarea>`.	Ereignisse, die auf `HTMLElement`, `HTMLInputElement` ausgelöst werden.
Tastatur	Ereignisse im Zusammenhang mit der Verwendung einer Tastatur. Werden verwendet, um zu benachrichtigen, wenn Tasten nach oben, unten bewegt oder einfach gedrückt werden.	Ereignisse, die auf `Document`, `Element` ausgelöst werden.
Laden/Entladen von Dokumenten	Ereignisse im Zusammenhang mit dem Laden und Entladen von Dokumenten.	Ereignisse, die auf `Document` und `Window` ausgelöst werden.
Manifeste	Ereignisse im Zusammenhang mit der Installation von progressive Web-App-Manifeste.	Ereignisse, die auf `Window` ausgelöst werden.
Medien	Ereignisse im Zusammenhang mit der Nutzung von Medien (einschließlich der Media Capture and Streams API, Web Audio API, Picture-in-Picture API, usw.).	Ereignisse, die auf `ScriptProcessorNode`, `HTMLMediaElement`, `AudioTrackList`, `AudioScheduledSourceNode`, `MediaRecorder`, `MediaStream`, `MediaStreamTrack`, `VideoTrackList`, `HTMLTrackElement`, `OfflineAudioContext`, `TextTrack`, `TextTrackList`, Element/audio, Element/video ausgelöst werden.
Nachrichtenübermittlung	Ereignisse im Zusammenhang mit einem Fenster, das eine Nachricht von einem anderen Browserkontext erhält.	Ereignisse, die auf `Window` ausgelöst werden.
Maus	Ereignisse im Zusammenhang mit der Verwendung einer Computermaus. Werden verwendet, um zu benachrichtigen, wenn die Maus geklickt, doppelt geklickt wird, Auf- und Ab-Bewegungen, Rechtsklicks, Bewegungen in oder aus einem Element, Textauswahl usw. Pointer-Ereignisse bieten eine hardwareunabhängige Alternative zu Mausereignissen. Zieh- und Radereignisse sind von Mausereignissen abgeleitet.	Mausereignisse, die auf `Element` ausgelöst werden.
Netzwerk/Verbindung	Ereignisse im Zusammenhang mit der Herstellung und dem Verlust einer Netzwerkverbindung.	Ereignisse, die auf `Window` ausgelöst werden. Ereignisse, die auf `NetworkInformation` (Network Information API) ausgelöst werden.
Zahlungen	Ereignisse im Zusammenhang mit der Payment Request API.	Ereignisse, die auf `PaymentRequest`, `PaymentResponse` ausgelöst werden.
Leistung	Ereignisse im Zusammenhang mit leistungsbezogenen Spezifikationen, die in Performance APIs gruppiert sind.	Ereignisse, die auf `Performance` ausgelöst werden.
Zeiger	Ereignisse im Zusammenhang mit der Pointer Events API. Bietet hardwareunabhängige Benachrichtigungen von Zeigegeräten einschließlich Maus, Touch, Stift/Eingabestift.	Ereignisse, die auf `Document`, `HTMLElement` ausgelöst werden.
Drucken	Ereignisse im Zusammenhang mit dem Drucken.	Ereignisse, die auf `Window` ausgelöst werden.
Promise-Ablehnung	Ereignisse, die an den globalen Skriptkontext gesendet werden, wenn ein JavaScript-Promise abgelehnt wird.	Ereignisse, die auf `Window` ausgelöst werden.
Sockets	Ereignisse im Zusammenhang mit der WebSockets API.	Ereignisse, die auf `WebSocket` ausgelöst werden.
SVG	Ereignisse im Zusammenhang mit SVG-Bildern.	Ereignisse, die auf `SVGElement`, `SVGAnimationElement`, `SVGGraphicsElement` ausgelöst werden.
Textauswahl	Selection API Ereignisse im Zusammenhang mit der Auswahl von Text.	Ereignis (`selectionchange`), das auf [`HTMLTextAreaElement`](/de/docs/Web/API/HTMLTextAreaElement/selectionchange_event), [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement/selectionchange_event) ausgelöst wird.
Touch	Ereignisse im Zusammenhang mit der Touch Events API. Bietet Benachrichtigungsereignisse von Interaktionen mit einem berührungsempfindlichen Bildschirm (d.h. mit einem Finger oder Eingabestift). Nicht verwandt mit der Force Touch API.	Ereignisse, die auf `Document`, `Element` ausgelöst werden.
Virtuelle Realität	Ereignisse im Zusammenhang mit der WebXR Device API. Warnung: Die WebVR API (und zugehörige `Window` Ereignisse) sind veraltet.	Ereignisse, die auf `XRSystem`, `XRSession`, `XRReferenceSpace` ausgelöst werden.
RTC (Echtzeitkommunikation)	Ereignisse im Zusammenhang mit der WebRTC API.	Ereignisse, die auf `RTCDataChannel`, `RTCDTMFSender`, `RTCIceTransport`, `RTCPeerConnection` ausgelöst werden.
Server-gesendete Ereignisse	Ereignisse im Zusammenhang mit der Server-sent events API.	Ereignisse, die auf `EventSource` ausgelöst werden.
Sprache	Ereignisse im Zusammenhang mit der Web Speech API.	Ereignisse, die auf `SpeechSynthesisUtterance` ausgelöst werden.
Workers	Ereignisse im Zusammenhang mit der Web Workers API, Service Worker API, Broadcast Channel API, und Channel Messaging API. Werden verwendet, um auf neue Nachrichten und Fehlermeldungen bei der Nachrichtenübermittlung zu reagieren. Service Worker können auch über andere Ereignisse benachrichtigt werden, einschließlich Push-Benachrichtigungen, wenn Benutzer auf angezeigte Benachrichtigungen klicken, dass ein Push-Abonnement ungültig geworden ist, das Löschen von Elementen aus dem Inhaltsindex usw.	Ereignisse, die auf `ServiceWorkerGlobalScope`, `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope`, `WorkerGlobalScope`, `Worker`, `BroadcastChannel`, `MessagePort` ausgelöst werden.

Erstellen und Auslösen von Ereignissen

Zusätzlich zu den von integrierten Schnittstellen ausgelösten Ereignissen können Sie selbst DOM-Ereignisse erstellen und auslösen. Solche Ereignisse werden im Allgemeinen synthetische Ereignisse genannt, im Gegensatz zu den vom Browser ausgelösten Ereignissen.

Erstellen von benutzerdefinierten Ereignissen

Ereignisse können wie folgt mit dem Event-Konstruktor erstellt werden:

const event = new Event("build");

// Listen for the event.
elem.addEventListener(
  "build",
  (e) => {
    /* … */
  },
  false,
);

// Dispatch the event.
elem.dispatchEvent(event);

Dieses Codebeispiel verwendet die Methode EventTarget.dispatchEvent().

Hinzufügen von benutzerdefinierten Daten – CustomEvent()

Um dem Ereignisobjekt mehr Daten hinzuzufügen, existiert die CustomEvent-Schnittstelle und die detail-Eigenschaft kann verwendet werden, um benutzerdefinierte Daten zu übergeben. Zum Beispiel könnte das Ereignis wie folgt erstellt werden:

const event = new CustomEvent("build", { detail: elem.dataset.time });

Dies ermöglicht Ihnen dann, die zusätzlichen Daten im Ereignislistener zuzugreifen:

function eventHandler(e) {
  console.log(`The time is: ${e.detail}`);
}

Hinzufügen von benutzerdefinierten Daten – Event unterklassifizieren

Die Event-Schnittstelle kann auch unterklassifiziert werden. Dies ist besonders nützlich für die Wiederverwendung, oder für komplexere benutzerdefinierte Daten, oder sogar um Methoden zum Ereignis hinzuzufügen.

class BuildEvent extends Event {
  #buildTime;

  constructor(buildTime) {
    super("build");
    this.#buildTime = buildTime;
  }

  get buildTime() {
    return this.#buildTime;
  }
}

Dieses Codebeispiel definiert eine BuildEvent-Klasse mit einer schreibgeschützten Eigenschaft und einem festen Ereignistyp.

Das Ereignis könnte dann wie folgt erstellt werden:

const event = new BuildEvent(elem.dataset.time);

Die zusätzlichen Daten können anschließend in den Ereignislistenern unter Verwendung der benutzerdefinierten Eigenschaften abgerufen werden:

function eventHandler(e) {
  console.log(`The time is: ${e.buildTime}`);
}

Ereignis-Bubbling

Es ist oft wünschenswert, ein Ereignis von einem untergeordneten Element auszulösen und ein übergeordnetes Element es abfangen zu lassen; optional können Sie Daten mit dem Ereignis einschließen:

html

<form>
  <textarea></textarea>
</form>

const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

// Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property
const eventAwesome = new CustomEvent("awesome", {
  bubbles: true,
  detail: { text: () => textarea.value },
});

// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method
form.addEventListener("awesome", (e) => console.log(e.detail.text()));

// As the user types, the textarea inside the form dispatches/triggers the event to fire, using itself as the starting point
textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));

Dynamisches Erstellen und Auslösen von Ereignissen

Elemente können auf Ereignisse hören, die noch nicht erstellt wurden:

html

<form>
  <textarea></textarea>
</form>

const form = document.querySelector("form");
const textarea = document.querySelector("textarea");

form.addEventListener("awesome", (e) => console.log(e.detail.text()));

textarea.addEventListener("input", function () {
  // Create and dispatch/trigger an event on the fly
  // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element
  this.dispatchEvent(
    new CustomEvent("awesome", {
      bubbles: true,
      detail: { text: () => textarea.value },
    }),
  );
});

Auslösen von integrierten Ereignissen

Dieses Beispiel veranschaulicht, wie ein Klick simuliert wird (das heißt, ein Klickereignis programmgesteuert generieren) auf einer Checkbox mit DOM-Methoden. Sehen Sie das Beispiel in Aktion.

function simulateClick() {
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

Registrierung von Ereignishandlern

Es gibt zwei empfohlene Ansätze für die Registrierung von Handlern. Der Ereignishandlercode kann so ausgeführt werden, dass er ausgelöst wird, entweder indem er der entsprechenden onevent-Eigenschaft des Zielelements zugewiesen wird, oder indem der Handler als Listener für das Element registriert wird, indem die Methode addEventListener() verwendet wird. In beiden Fällen wird der Handler ein Objekt empfangen, das der Event interface (oder einer abgeleiteten Schnittstelle) entspricht. Der Hauptunterschied besteht darin, dass mehrere Ereignishandler mit den Methoden des Ereignislisteners hinzugefügt (oder entfernt) werden können.

Warnung: Ein dritter Ansatz zur Einstellung von Ereignishandlern mit HTML-Onevent-Attributen wird nicht empfohlen! Sie blähen das Markup auf und machen es weniger lesbar und schwieriger zu debuggen. Weitere Informationen finden Sie unter Inline-Ereignishandler.

Verwendung von Onevent-Eigenschaften

Nach Konvention verfügen JavaScript-Objekte, die Ereignisse auslösen, über entsprechende "onevent" Eigenschaft(en) (durch Voranstellen von "on" an den Namen des Ereignisses benannt). Diese Eigenschaften werden aufgerufen, um zugeordnete Handlercodes auszuführen, wenn das Ereignis ausgelöst wird, und können auch direkt von Ihrem eigenen Code aufgerufen werden.

Um Ereignishandlercode einzurichten, können Sie ihn einfach der entsprechenden Onevent-Eigenschaft zuweisen. Für jedes Ereignis eines Elements kann nur ein Ereignishandler zugewiesen werden. Bei Bedarf kann der Handler durch Zuweisung einer anderen Funktion zu derselben Eigenschaft ersetzt werden.

Das folgende Beispiel zeigt, wie eine greet()-Funktion für das click-Ereignis mit der onclick-Eigenschaft eingerichtet wird.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;

Beachten Sie, dass ein Objekt, das das Ereignis darstellt, als erstes Argument an den Ereignishandler übergeben wird. Dieses Ereignisobjekt implementiert entweder oder wird von der Event-Schnittstelle abgeleitet.

EventTarget.addEventListener

Der flexibelste Weg, einen Ereignishandler an einem Element einzurichten, ist die Verwendung der EventTarget.addEventListener-Methode. Dieser Ansatz ermöglicht es, mehrere Listener einem Element zuzuordnen und sie bei Bedarf mit EventTarget.removeEventListener zu entfernen.

Hinweis: Die Möglichkeit, Ereignishandler hinzuzufügen und zu entfernen, ermöglicht es Ihnen beispielsweise, dass derselbe Button in unterschiedlichen Umständen unterschiedliche Aktionen ausführt. Außerdem kann in komplexeren Programmen das Bereinigen von alten/nicht genutzten Ereignishandlern die Effizienz verbessern.

Das folgende Beispiel zeigt, wie eine greet()-Funktion als Listener/Ereignishandler für das click-Ereignis eingerichtet werden kann (Sie könnten bei Bedarf eine anonyme Funktionsausdruck anstelle einer benannten Funktion verwenden). Beachten Sie erneut, dass das Ereignis als erstes Argument an den Ereignishandler übergeben wird.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);

Die Methode kann auch zusätzliche Argumente/Optionen aufnehmen, um Aspekte wie das Capturing und Entfernen von Ereignissen zu steuern. Weitere Informationen finden Sie auf der Referenzseite EventTarget.addEventListener.

Verwendung von AbortSignal

Eine bemerkenswerte Funktion von Ereignislistenern ist die Möglichkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignishandler gleichzeitig aufzuräumen.

Dies geschieht, indem das gleiche AbortSignal an den Aufruf von addEventListener() für alle Ereignishandler übergeben wird, die Sie zusammen entfernen möchten. Dann können Sie abort() auf dem Controller aufrufen, dem das AbortSignal gehört, und es entfernt alle Ereignishandler, die mit diesem Signal hinzugefügt wurden. Zum Beispiel, um einen Ereignishandler hinzuzufügen, den wir mit einem AbortSignal entfernen können:

const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal },
); // pass an AbortSignal to this handler

Dieser Ereignishandler kann dann folgendermaßen entfernt werden:

controller.abort(); // removes any/all event handlers associated with this controller

Interaktion mehrerer Ereignishandler

Die IDL-Eigenschaft onevent (zum Beispiel, element.onclick = ...) und der HTML-Onevent-Inhaltsattribut (zum Beispiel, <button onclick="...">) zielen beide auf denselben einzelnen Handler-Slot. HTML wird geladen, bevor JavaScript auf dasselbe Element zugreifen kann, sodass normalerweise JavaScript ersetzt, was in HTML angegeben ist. Mit addEventListener() hinzugefügte Handler sind unabhängig. Die Verwendung von onevent entfernt oder ersetzt keine Listener, die mit addEventListener() hinzugefügt wurden, und umgekehrt.

Wenn ein Ereignis gesendet wird, werden Listener in Phasen aufgerufen. Es gibt zwei Phasen: Capturing und Bubbling. In der Capture-Phase beginnt das Ereignis beim höchsten Vorfahrenelement und bewegt sich den DOM-Baum hinunter, bis es das Ziel erreicht. In der Bubble-Phase bewegt sich das Ereignis in die entgegengesetzte Richtung. Ereignislistener lauschen standardmäßig in der Bubble-Phase, und sie können in der Erfassungsphase mithilfe von capture: true mit addEventListener() lauschen. Innerhalb einer Phase werden Listener in der Reihenfolge ausgeführt, in der sie registriert wurden. Der onevent-Handler wird zum ersten Mal registriert, wenn er einen nicht-null-Wert erhält; spätere Neubewertungen ändern nur seinen Rückruf, nicht seine Position in der Reihenfolge.

Das Aufrufen von Event.stopPropagation() verhindert das Aufrufen von Listenern auf anderen Elementen, die später in der Propagationskette sind. Event.stopImmediatePropagation() verhindert auch das Aufrufen verbleibender Listener auf demselben Element.

Spezifikationen

Specification
DOM # events
HTML # events-2

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

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