DOM-Ereignisse

Ereignisse werden ausgelöst, um Code über "interessante Änderungen" zu informieren, die die Code-Ausführung beeinflussen können. Diese können sich aus Benutzerinteraktionen wie der Verwendung einer Maus oder der Größenänderung eines Fensters, Veränderungen im Zustand der zugrunde liegenden Umgebung (z. B. niedriger Akkustand oder Medienereignisse vom Betriebssystem) und anderen Ursachen ergeben.

Jedes Ereignis wird durch ein Objekt dargestellt, das auf der Event-Schnittstelle basiert und zusätzliche benutzerdefinierte Felder und/oder Funktionen enthalten kann, um Informationen darüber bereitzustellen, was passiert ist. Die Dokumentation für jedes Ereignis enthält eine Tabelle (nahe 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 > Schnittstellen basierend auf Ereignis.

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

Ereignisindex

Ereignistyp	Beschreibung	Dokumentation
Animation	Ereignisse im Zusammenhang mit der Web Animations API. Wird verwendet, um auf Änderungen im Animationsstatus zu reagieren (z. B. wenn eine Animation startet oder endet).	Animation-Ereignisse, die auf `Document`, `Window`, `HTMLElement` ausgelöst werden.
Asynchrones Abrufen von Daten	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. Wird 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" (statt normale Tastendrücke). Zum Beispiel Text, der über eine Sprache-zu-Text-Engine eingegeben wird, oder spezielle Tastenkombinationen, die Tastendrücke ändern, 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-Modifikation	Ereignisse im Zusammenhang mit Änderungen an der Document Object Model (DOM)-Hierarchie und Knoten.	Warnung: Mutationsereignisse sind veraltet. Mutations-Observer sollten stattdessen verwendet werden.
Drag'n'drop, Rad	Ereignisse im Zusammenhang mit der HTML Drag and Drop API und Raderereignissen. Zieh- und Raderereignisse leiten sich von Mausereignissen ab. Während sie beim Verwenden des Mausrads oder Drag/Drop ausgelöst werden, können sie auch mit anderer geeigneter Hardware verwendet werden.	Zieh-Ereignisse, die auf `Document` ausgelöst werden. Raderereignisse, die auf `Element` ausgelöst werden.
Fokus	Ereignisse im Zusammenhang mit dem Erlangen und Verlieren des Fokus von Elementen.	Ereignisse, die auf `Element`, `Window` ausgelöst werden.
Formular	Ereignisse im Zusammenhang mit der Konstruktion, dem Zurücksetzen und dem Absenden von Formularen.	Ereignisse, die auf `HTMLFormElement` ausgelöst werden.
Vollbild	Ereignisse im Zusammenhang mit der Vollbild-API. Wird verwendet, um zu benachrichtigen, wenn zwischen Vollbild- und Fenstermodus gewechselt wird, und auch bei Fehlern, 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. Darüber hinaus gibt es eine Reihe von nicht standardisierten Gestenereignissen: Nicht standardisierte, WebKit-spezifische Ereignisse auf `Element`: `gesturestart`-Ereignis, `gesturechange`-Ereignis, `gestureend`-Ereignis.
Verlauf	Ereignisse im Zusammenhang mit der History API.	Ereignisse, die auf `Window` ausgelöst werden.
Verwaltung der HTML-Element-Inhaltsanzeige	Ereignisse im Zusammenhang mit der Änderung 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. Wird verwendet, um zu benachrichtigen, wenn Tasten gedrückt, losgelassen oder einfach betätigt 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 "window", 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. Wird verwendet, um zu benachrichtigen, wenn die Maus angeklickt, doppelt angeklickt, auf- und abgezogen, rechts angeklickt, in ein Element hinein- und hinausbewegt, Text ausgewählt usw. wird. Zeigerereignisse bieten eine hardwareunabhängige Alternative zu Mausereignissen. Zieh- und Raderereignisse leiten sich von Mausereignissen ab.	Mausereignisse, die auf `Element` ausgelöst werden.
Netzwerk/Verbindung	Ereignisse im Zusammenhang mit dem Erlangen und Verlust der Netzwerkverbindung.	Ereignisse, die auf `Window` ausgelöst werden. Ereignisse, die auf `NetworkInformation` ausgelöst werden (Network Information API).
Zahlungen	Ereignisse im Zusammenhang mit der Payment Request API.	Ereignisse, die auf `PaymentRequest`, `PaymentResponse` ausgelöst werden.
Performance	Ereignisse im Zusammenhang mit beliebigen leistungsbezogenen Spezifikationen, gruppiert in Performance APIs.	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/Stylus.	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 beliebiges JavaScript-Promise abgelehnt wird.	Ereignisse, die auf `Window` ausgelöst werden.
Socket-Verbindungen	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. Stellt Benachrichtigungsereignisse aus der Interaktion mit einem berührungsempfindlichen Bildschirm bereit (d.h. Verwendung eines Fingers oder Stylus). Nicht im Zusammenhang 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 dazugehö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 gesendeten Ereignis-API.	Ereignisse, die auf `EventSource` ausgelöst werden.
Sprachkommunikation	Ereignisse im Zusammenhang mit der Web Speech API.	Ereignisse, die auf `SpeechSynthesisUtterance` ausgelöst werden.
Arbeiter	Ereignisse im Zusammenhang mit der Web Workers API, Service Worker API, Broadcast Channel API und Channel Messaging API. Wird verwendet, um auf neue Nachrichten und Fehler beim Versenden von Nachrichten zu reagieren. Service Worker können auch über andere Ereignisse benachrichtigt werden, einschließlich Push-Benachrichtigungen, Klicks von Nutzern auf angezeigte Benachrichtigungen, dass das 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 normalerweise als synthetische Ereignisse bezeichnet, im Gegensatz zu den vom Browser ausgelösten Ereignissen.

Erstellen benutzerdefinierter Ereignisse

Ereignisse können mit dem Event-Konstruktor 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().

Hinzufügen benutzerdefinierter 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. Beispielweise könnte das Ereignis wie folgt erstellt werden:

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

Dies ermöglicht es Ihnen dann, die zusätzlichen Daten im Ereignis-Listener abzurufen:

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

Hinzufügen benutzerdefinierter Daten – Untersubklassen von Event

Die Event-Schnittstelle kann auch unterklassen werden. Dies ist besonders nützlich für die Wiederverwendung oder 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 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 dann in den Ereignis-Listenern mithilfe der benutzerdefinierten Eigenschaften abgerufen werden:

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

Ereignis-Blasen

Es ist oft wünschenswert, ein Ereignis von einem Kindelement auszulösen und es von einem Vorfahren abfangen zu lassen; optional können Daten mit dem Ereignis eingeschlossen werden:

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

Erstellen und dynamisches Auslösen von Ereignissen

Elemente können auf Ereignisse horchen, 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 zeigt, wie man einen Klick (das programmatische Erzeugen eines Klickereignisses) auf ein Kontrollkästchen mithilfe von DOM-Methoden simuliert. 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");
  }
}

Registrieren von Ereignis-Handlern

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

Warnung: Ein dritter Ansatz zum Setzen von Ereignis-Handlern mithilfe von HTML-Onevent-Attributen wird nicht empfohlen! Sie blähen das Markup auf und machen es weniger leserlich und schwerer zu debuggen. Weitere Informationen finden Sie unter Inline-Ereignis-Handler.

Verwendung von onevent-Eigenschaften

Nach Konvention haben JavaScript-Objekte, die Ereignisse auslösen, entsprechende "onevent"-Eigenschaften (benannt durch Vorsetzen von "on" vor den Namen des Ereignisses). Diese Eigenschaften werden aufgerufen, um zugeordneten Handler-Code auszuführen, wenn das Ereignis ausgelöst wird, und können auch direkt von Ihrem eigenen Code aufgerufen werden.

Um Ereignis-Handler-Code zu setzen, können Sie ihn einfach der entsprechenden onevent-Eigenschaft zuweisen. Für jedes Ereignis in einem Element kann nur ein Ereignis-Handler zugewiesen werden. Bei Bedarf kann der Handler durch Zuweisen einer anderen Funktion zur gleichen Eigenschaft ersetzt werden.

Das folgende Beispiel zeigt, wie eine greet()-Funktion für das click-Ereignis mithilfe der onclick-Eigenschaft gesetzt 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 Ereignis-Handler übergeben wird. Dieses Ereignisobjekt implementiert entweder die Event-Schnittstelle oder leitet sich von dieser ab.

EventTarget.addEventListener

Der flexibelste Weg, einen Ereignis-Handler auf ein Element zu setzen, ist die Verwendung der Methode EventTarget.addEventListener. Dieser Ansatz ermöglicht es, mehrere Listener auf ein Element zuzuweisen und ermöglicht es, Listener bei Bedarf mit EventTarget.removeEventListener zu entfernen.

Hinweis: Die Fähigkeit, Ereignis-Handler hinzuzufügen und zu entfernen, ermöglicht es Ihnen beispielsweise, denselben Button in verschiedenen Umständen unterschiedliche Aktionen ausführen zu lassen. Darüber hinaus kann das Aufräumen von alten/ungenutzten Ereignis-Handlern in komplexeren Programmen die Effizienz verbessern.

Das folgende Beispiel zeigt, wie eine greet()-Funktion als Listener/Ereignishandler für das click-Ereignis gesetzt 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 Ereignis-Handler ü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 annehmen, um Aspekte der Art und Weise zu steuern, wie Ereignisse erfasst und entfernt werden. Weitere Informationen finden Sie auf der Referenzseite für EventTarget.addEventListener.

Verwendung von AbortSignal

Ein bemerkenswertes Feature des Ereignis-Listeners ist die Fähigkeit, ein Abbruchs-Signal zu verwenden, um mehrere Ereignis-Handler gleichzeitig bereinigen zu können.

Dies wird erreicht, indem dasselbe AbortSignal in den Aufruf von addEventListener() für alle Ereignis-Handler, die Sie gemeinsam entfernen möchten, übergeben wird. Sie können dann abort() auf den Controller, der das AbortSignal besitzt, aufrufen, und es werden alle Ereignis-Handler entfernt, die mit diesem Signal hinzugefügt wurden. Zum Beispiel kann ein Ereignis-Handler hinzugefügt werden, 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 Ereignis-Handler kann dann so entfernt werden:

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

Interaktion von mehreren Ereignis-Handlern

Die onevent IDL-Eigenschaft (zum Beispiel, element.onclick = ...) und das HTML onevent-Inhaltsattribut (zum Beispiel, <button onclick="...">) zielen beide auf denselben einzigen Handler-Slot ab. HTML wird geladen, bevor JavaScript dasselbe Element erreichen kann, daher ersetzt JavaScript normalerweise das, was in HTML angegeben ist. Mit addEventListener() hinzugefügte Handler sind unabhängig. Die Verwendung von onevent ändert oder ersetzt nicht die 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 vom 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 hören standardmäßig in der Bubble-Phase, und sie können in der Capture-Phase lauschen, indem sie capture: true mit addEventListener() angeben. Innerhalb einer Phase werden Listener in der Reihenfolge aufgerufen, in der sie registriert wurden. Der onevent-Handler wird registriert, sobald er nicht null ist; spätere Neuzuordnungen ändern nur seinen Callback, nicht seine Position in der Reihenfolge.

Das Aufrufen von Event.stopPropagation() verhindert, dass Listener auf anderen Elementen später in der Verteilungskette aufgerufen werden. Event.stopImmediatePropagation() verhindert auch das Aufrufen der verbleibenden 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