DOM-Ereignisse

Events werden ausgelöst, um Code über „interessante Änderungen“ zu informieren, die die Codeausführung beeinflussen können. Diese können durch Benutzerinteraktionen wie die Verwendung einer Maus oder das Ändern der Fenstergröße, Änderungen des Zustands der zugrunde liegenden Umgebung (z. B. niedriger Akkustand oder Medienereignisse des Betriebssystems) sowie andere Ursachen entstehen.

Jedes Ereignis wird durch ein Objekt dargestellt, das auf der Schnittstelle Event basiert und möglicherweise zusätzliche benutzerdefinierte Felder und/oder Funktionen enthält, um Informationen über das Geschehene bereitzustellen. Die Dokumentation für jedes Ereignis enthält eine Tabelle (nahe dem Anfang), die einen Link zur zugehörigen Ereignisschnittstelle sowie weitere relevante Informationen enthält. Eine vollständige Liste der verschiedenen Ereignistypen finden Sie unter Event > Interfaces based on Event.

Dieses Thema bietet einen Index der wichtigsten Arten von Ereignissen, die für Sie interessant sein könnten (Animation, Zwischenablage, Workers usw.), zusammen mit den wichtigsten Klassen, welche diese Ereignisarten implementieren.

Ereignisindex

Ereignistyp	Beschreibung	Dokumentation
Animation	Ereignisse im Zusammenhang mit der Web Animation API. Werden verwendet, um auf Änderungen des Animationsstatus zu reagieren (z. B. wenn eine Animation beginnt oder endet).	Animationsereignisse werden ausgelöst auf `Document`, `Window`, `HTMLElement`.
Asynchrones Abrufen von Daten	Ereignisse im Zusammenhang mit dem Abrufen von Daten.	Ereignisse werden ausgelöst auf `AbortSignal`, `XMLHttpRequest`, `FileReader`.
Zwischenablage	Ereignisse im Zusammenhang mit der Clipboard API. Werden ausgelöst, wenn Inhalte ausgeschnitten, kopiert oder eingefügt werden.	Ereignisse werden ausgelöst auf `Document`, `Element`, `Window`.
Komposition	Ereignisse im Zusammenhang mit Komposition, also der „indirekten“ Texteingabe (anstatt über gewöhnliche Tastendrücke). Beispielsweise Text, der über eine Sprach-zu-Text-Engine eingegeben wird, oder durch spezielle Tastenkombinationen, welche Tastendrücke verändern, um neue Zeichen in einer anderen Sprache darzustellen.	Ereignisse werden ausgelöst auf `Element`.
CSS-Transition	Ereignisse im Zusammenhang mit CSS Transitions. Stellt Benachrichtigungsereignisse bereit, wenn CSS-Transitions beginnen, enden, abgebrochen werden usw.	Ereignisse werden ausgelöst auf `Document`, `HTMLElement`, `Window`.
Datenbank	Ereignisse im Zusammenhang mit Datenbankoperationen: Öffnen, Schließen, Transaktionen, Fehler usw.	Ereignisse werden ausgelöst auf `IDBDatabase`, `IDBOpenDBRequest`, `IDBRequest`, `IDBTransaction`.
DOM-Mutation	Ereignisse im Zusammenhang mit Änderungen an der Hierarchie und den Knoten des Document Object Model (DOM).	Warnung: Mutation Events sind veraltet. Mutation Observers sollten stattdessen verwendet werden.
Drag'n'Drop, Mausrad	Ereignisse im Zusammenhang mit der Verwendung der HTML Drag and Drop API und Mausradereignissen. Drag- und Wheel-Ereignisse werden von Mausereignissen abgeleitet. Sie werden zwar bei der Verwendung des Mausrads oder von Drag-and-Drop ausgelöst, können aber auch mit anderer geeigneter Hardware verwendet werden.	Drag-Ereignisse werden ausgelöst auf `Document` Wheel-Ereignisse werden ausgelöst auf `Element`
Fokus	Ereignisse im Zusammenhang damit, dass Elemente den Fokus erhalten oder verlieren.	Ereignisse werden ausgelöst auf `Element`, `Window`.
Formular	Ereignisse im Zusammenhang mit dem Erstellen, Zurücksetzen und Absenden von Formularen.	Ereignisse werden ausgelöst auf `HTMLFormElement`.
Vollbild	Ereignisse im Zusammenhang mit der Fullscreen API. Werden ausgelöst, wenn zwischen Vollbild- und Fenstermodus gewechselt wird, sowie bei Fehlern, die während dieses Übergangs auftreten.	Ereignisse werden ausgelöst auf `Document`, `Element`.
Gamepad	Ereignisse im Zusammenhang mit der Gamepad API.	Ereignisse werden ausgelöst auf `Window`.
Gesten	Touch Events werden zur Implementierung von Gesten empfohlen.	Ereignisse werden ausgelöst auf `Document`, `Element`. Zusätzlich gibt es eine Reihe nicht standardisierter Gestenereignisse: Nicht standardisierte, WebKit-spezifische Ereignisse auf `Element`: `gesturestart`-Ereignis, `gesturechange`-Ereignis, `gestureend`-Ereignis.
Verlauf	Ereignisse im Zusammenhang mit der History API.	Ereignisse werden ausgelöst auf `Window`.
Verwaltung der Inhaltsanzeige von HTML-Elementen	Ereignisse im Zusammenhang mit dem Ändern des Zustands eines Anzeige- oder Textelements.	Ereignisse werden ausgelöst auf `HTMLDetailsElement`, `HTMLDialogElement`, `HTMLSlotElement`.
Eingaben	Ereignisse im Zusammenhang mit HTML-Eingabeelementen, z. B. `<input>`, `<select>` oder `<textarea>`.	Ereignisse werden ausgelöst auf `HTMLElement`, `HTMLInputElement`.
Tastatur	Ereignisse im Zusammenhang mit der Verwendung einer Tastatur. Werden ausgelöst, wenn Tasten losgelassen, gedrückt oder gerade betätigt werden.	Ereignisse werden ausgelöst auf `Document`, `Element`.
Laden/Entladen von Dokumenten	Ereignisse im Zusammenhang mit dem Laden und Entladen von Dokumenten.	Ereignisse werden ausgelöst auf `Document` und `Window`.
Manifeste	Ereignisse im Zusammenhang mit der Installation von Progressive-Web-App-Manifesten.	Ereignisse werden ausgelöst auf `Window`.
Medien	Ereignisse im Zusammenhang mit der Mediennutzung (einschließlich der Media Capture and Streams API, Web Audio API, Picture-in-Picture API usw.).	Ereignisse werden ausgelöst auf `ScriptProcessorNode`, `HTMLMediaElement`, `AudioTrackList`, `AudioScheduledSourceNode`, `MediaRecorder`, `MediaStream`, `MediaStreamTrack`, `VideoTrackList`, `HTMLTrackElement`, `OfflineAudioContext`, `TextTrack`, `TextTrackList`, Element/audio, Element/video.
Messaging	Ereignisse im Zusammenhang damit, dass ein Fenster eine Nachricht von einem anderen Browsing-Kontext empfängt.	Ereignisse werden ausgelöst auf `Window`.
Maus	Ereignisse im Zusammenhang mit der Verwendung einer Computermaus. Werden ausgelöst, wenn die Maus geklickt oder doppelt geklickt wird, bei Ereignissen zum Drücken und Loslassen, bei Rechtsklicks, beim Bewegen in und aus einem Element, bei Textauswahl usw. Pointer-Ereignisse bieten eine hardwareunabhängige Alternative zu Mausereignissen. Drag- und Wheel-Ereignisse werden von Mausereignissen abgeleitet.	Mausereignisse werden ausgelöst auf `Element`
Netzwerk/Verbindung	Ereignisse im Zusammenhang mit dem Herstellen und Verlieren einer Netzwerkverbindung.	Ereignisse werden ausgelöst auf `Window`. Ereignisse werden ausgelöst auf `NetworkInformation` (Network Information API).
Zahlungen	Ereignisse im Zusammenhang mit der Payment Request API.	Ereignisse werden ausgelöst auf `PaymentRequest`, `PaymentResponse`.
Leistung	Ereignisse im Zusammenhang mit einer leistungsbezogenen Spezifikation, die unter Performance APIs zusammengefasst ist.	Ereignisse werden ausgelöst auf `Performance`.
Pointer	Ereignisse im Zusammenhang mit der Pointer Events API. Stellt hardwareunabhängige Benachrichtigungen von Zeigegeräten bereit, einschließlich Maus, Touch, Stift/Stylus.	Ereignisse werden ausgelöst auf `Document`, `HTMLElement`.
Drucken	Ereignisse im Zusammenhang mit dem Drucken.	Ereignisse werden ausgelöst auf `Window`.
Promise-Ablehnung	Ereignisse, die an den globalen Skriptkontext gesendet werden, wenn ein JavaScript-Promise abgelehnt wird.	Ereignisse werden ausgelöst auf `Window`.
Sockets	Ereignisse im Zusammenhang mit der WebSockets API.	Ereignisse werden ausgelöst auf `WebSocket`.
SVG	Ereignisse im Zusammenhang mit SVG-Bildern.	Ereignisse werden ausgelöst auf `SVGElement`, `SVGAnimationElement`, `SVGGraphicsElement`.
Textauswahl	Ereignisse der Selection API im Zusammenhang mit der Auswahl von Text.	Ereignis (`selectionchange`), das ausgelöst wird auf [`HTMLTextAreaElement`](/de/docs/Web/API/HTMLTextAreaElement/selectionchange_event), [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement/selectionchange_event).
Touch	Ereignisse im Zusammenhang mit der Touch Events API. Stellt Benachrichtigungsereignisse bei der Interaktion mit einem berührungsempfindlichen Bildschirm bereit (d.h. mit einem Finger oder Stylus). Nicht mit der Force Touch API verbunden.	Ereignisse werden ausgelöst auf `Document`, `Element`.
Virtuelle Realität	Ereignisse im Zusammenhang mit der WebXR Device API. Warnung: Die WebVR API (und zugehörige `Window`-Ereignisse) sind veraltet.	Ereignisse werden ausgelöst auf `XRSystem`, `XRSession`, `XRReferenceSpace`.
RTC (Echtzeitkommunikation)	Ereignisse im Zusammenhang mit der WebRTC API.	Ereignisse werden ausgelöst auf `RTCDataChannel`, `RTCDTMFSender`, `RTCIceTransport`, `RTCPeerConnection`.
Server-gesendete Ereignisse	Ereignisse im Zusammenhang mit der Server-Sent Events API.	Ereignisse werden ausgelöst auf `EventSource`.
Sprache	Ereignisse im Zusammenhang mit der Web Speech API.	Ereignisse werden ausgelöst auf `SpeechSynthesisUtterance`.
Workers	Ereignisse im Zusammenhang mit der Web Workers API, Service Worker API, Broadcast Channel API und der Channel Messaging API. Werden verwendet, um auf neue Nachrichten und Fehler beim Senden von Nachrichten zu reagieren. Service Workers können außerdem über andere Ereignisse benachrichtigt werden, darunter Push-Benachrichtigungen, das Klicken auf angezeigte Benachrichtigungen durch Benutzer, die Ungültigkeit eines Push-Abonnements, das Löschen von Einträgen aus dem Inhaltsindex usw.	Ereignisse werden ausgelöst auf `ServiceWorkerGlobalScope`, `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope`, `WorkerGlobalScope`, `Worker`, `BroadcastChannel`, `MessagePort`.

Erstellen und Auslösen von Ereignissen

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

Benutzerdefinierte Ereignisse erstellen

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

const event = new Event("build");

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

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

Dieses Codebeispiel verwendet die Methode EventTarget.dispatchEvent().

Benutzerdefinierte Daten hinzufügen – CustomEvent()

Um dem Ereignisobjekt weitere Daten hinzuzufügen, gibt es die Schnittstelle CustomEvent, und die Eigenschaft detail kann verwendet werden, um benutzerdefinierte Daten zu übergeben. Beispielsweise könnte das Ereignis wie folgt erstellt werden:

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

Dadurch können Sie anschließend im Ereignis-Listener auf die zusätzlichen Daten zugreifen:

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

Benutzerdefinierte Daten hinzufügen – Event ableiten

Die Schnittstelle Event kann auch abgeleitet werden. Dies ist besonders nützlich für die Wiederverwendung, für komplexere benutzerdefinierte Daten oder sogar zum Hinzufügen von Methoden zum Ereignis.

class BuildEvent extends Event {
  #buildTime;

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

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

Dieses Codebeispiel definiert eine Klasse BuildEvent 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);

Auf die zusätzlichen Daten kann anschließend in den Ereignis-Listenern mithilfe der benutzerdefinierten Eigenschaften zugegriffen werden:

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

Event-Bubbling

Es ist oft wünschenswert, ein Ereignis von einem Kindelement auszulösen und es von einem Vorgängerelement abfangen zu lassen; optional können Sie Daten mit dem Ereignis übergeben:

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));

Ereignisse dynamisch erstellen und auslösen

Elemente können auf Ereignisse warten, 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 },
    }),
  );
});

Integrierte Ereignisse auslösen

Dieses Beispiel zeigt, wie ein Klick auf ein Kontrollkästchen mit DOM-Methoden simuliert wird (d.h. ein Klickereignis programmgesteuert erzeugt wird). Beispiel in Aktion ansehen.

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");
  }
}

Ereignishandler registrieren

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

Warnung: Ein dritter Ansatz zum Festlegen von Ereignishandlern mithilfe von 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.

`onevent`-Eigenschaften verwenden

Konventionsgemäß haben JavaScript-Objekte, die Ereignisse auslösen, entsprechende „onevent“-Eigenschaften (benannt, indem dem Namen des Ereignisses „on“ vorangestellt wird). Diese Eigenschaften werden aufgerufen, um den zugehörigen Handler-Code auszuführen, wenn das Ereignis ausgelöst wird, und können auch direkt durch Ihren eigenen Code aufgerufen werden.

Um Ereignishandler-Code festzulegen, können Sie ihn einfach der entsprechenden onevent-Eigenschaft zuweisen. Für jedes Ereignis kann in einem Element nur ein Ereignishandler zugewiesen werden. Bei Bedarf kann der Handler ersetzt werden, indem derselben Eigenschaft eine andere Funktion zugewiesen wird.

Das folgende Beispiel zeigt, wie eine Funktion greet() für das Ereignis click mithilfe der Eigenschaft onclick festgelegt 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 die Schnittstelle Event oder wird von ihr abgeleitet.

EventTarget.addEventListener

Die flexibelste Methode, einen Ereignishandler für ein Element festzulegen, ist die Verwendung der Methode EventTarget.addEventListener. Dieser Ansatz ermöglicht es, einem Element mehrere Listener zuzuweisen, und erlaubt es, Listener bei Bedarf mithilfe von EventTarget.removeEventListener zu entfernen.

Hinweis: Die Möglichkeit, Ereignishandler hinzuzufügen und zu entfernen, erlaubt es Ihnen beispielsweise, dass dieselbe Schaltfläche unter unterschiedlichen Umständen verschiedene Aktionen ausführt. Darüber hinaus kann das Aufräumen alter oder ungenutzter Ereignishandler in komplexeren Programmen die Effizienz verbessern.

Das folgende Beispiel zeigt, wie eine Funktion greet() als Listener/Ereignishandler für das Ereignis click festgelegt werden kann (Sie können auf Wunsch statt einer benannten Funktion einen anonymen Funktionsausdruck 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 außerdem zusätzliche Argumente/Optionen annehmen, um Aspekte der Erfassung und Entfernung von Ereignissen zu steuern. Weitere Informationen finden Sie auf der Referenzseite zu EventTarget.addEventListener.

AbortSignal verwenden

Eine bemerkenswerte Funktion von Event-Listenern ist die Möglichkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignishandler gleichzeitig zu bereinigen.

Dazu wird dasselbe AbortSignal an den Aufruf von addEventListener() für alle Ereignishandler übergeben, die Sie gemeinsam entfernen können möchten. Sie können dann abort() auf dem Controller aufrufen, dem das AbortSignal gehört. Dadurch werden alle Ereignishandler entfernt, die mit diesem Signal hinzugefügt wurden. Um beispielsweise 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 anschließend wie folgt entfernt werden:

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

Interaktion mehrerer Ereignishandler

Die IDL-Eigenschaft onevent (beispielsweise element.onclick = ...) und das HTML-Inhaltsattribut onevent (beispielsweise <button onclick="...">) zielen beide auf denselben einzelnen Handler-Slot. HTML wird geladen, bevor JavaScript auf dasselbe Element zugreifen kann, daher ersetzt JavaScript gewöhnlich die in HTML angegebene Einstellung. Mit addEventListener() hinzugefügte Handler sind unabhängig. Die Verwendung von onevent entfernt oder ersetzt keine mit addEventListener() hinzugefügten Listener und umgekehrt.

Wenn ein Ereignis ausgelöst wird, werden Listener in Phasen aufgerufen. Es gibt zwei Phasen: Capture und Bubble. In der Capture-Phase beginnt das Ereignis beim höchsten Vorgängerelement und bewegt sich im DOM-Baum nach unten, bis es das Ziel erreicht. In der Bubble-Phase bewegt sich das Ereignis in die entgegengesetzte Richtung. Event-Listener warten standardmäßig in der Bubble-Phase; sie können in der Capture-Phase warten, indem bei addEventListener() capture: true angegeben wird. Innerhalb einer Phase werden Listener in der Reihenfolge ausgeführt, in der sie registriert wurden. Der onevent-Handler wird registriert, wenn er erstmals nicht null wird; spätere Neuzuweisungen ändern nur seinen Callback, nicht seine Position in der Reihenfolge.

Der Aufruf von Event.stopPropagation() verhindert, dass Listener auf anderen Elementen später in der Propagierungskette aufgerufen werden. Event.stopImmediatePropagation() verhindert außerdem den Aufruf verbleibender Listener auf demselben Element.

Spezifikationen

Spezifikation
DOM # events
HTML # events-2

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