DOM-Ereignisse

Ereignisse werden ausgelöst, um den Code über "interessante Änderungen" zu informieren, die die Codeausführung beeinflussen könnten. Diese Änderungen können aus Benutzerinteraktionen resultieren, wie z.B. der Verwendung einer Maus oder dem Ändern der Fenstergröße, Änderungen im Zustand der zugrunde liegenden Umgebung (z.B. niedriger Batteriestand oder Medienereignisse des Betriebssystems) und anderen Ursachen.

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

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. Wird verwendet, um auf Änderungen des Animationsstatus zu reagieren (z.B. wenn eine Animation startet oder endet).	Animation-Ereignisse, die auf `Document`, `Window`, `HTMLElement` ausgelöst werden.
Asynchrone Datenabfrage	Ereignisse im Zusammenhang mit dem Abrufen von Daten.	Ereignisse, die auf `AbortSignal`, `XMLHttpRequest`, `FileReader` ausgelöst werden.
Zwischenablage	Ereignisse im Zusammenhang mit der Zwischenablage-API. Wird verwendet, um zu benachrichtigen, wenn Inhalte ausgeschnitten, kopiert oder eingefügt werden.	Ereignisse, die auf `Dokument`, `Element`, `Fenster` ausgelöst werden.
Komposition	Ereignisse im Zusammenhang mit der Komposition; Eingabe von Text "indirekt" (anstelle der Verwendung normaler Tastatureingaben). Zum Beispiel Text, der über eine Spracherkennungs-Engine eingegeben wurde, oder mit speziellen Tasten-kombinationen, die Tastatureingaben ä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. Bietet Benachrichtigungsevents, wenn CSS-Übergänge starten, stoppen, 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: Mutation Events sind veraltet. Mutation Observers sollten stattdessen verwendet werden.
Drag'n'drop, Wheel	Ereignisse im Zusammenhang mit der Verwendung der HTML Drag and Drop API und Wheel-Ereignisse. Drag- und Wheel-Ereignisse leiten sich von Mausevents ab. Sie werden ausgelöst, wenn das Mausrad oder Drag/Drop verwendet wird, können jedoch auch mit anderer geeigneter Hardware verwendet werden.	Drag-Ereignisse, die auf `Dokument` ausgelöst werden. Wheel-Ereignisse, die auf `Element` ausgelöst werden.
Fokus	Ereignisse im Zusammenhang mit dem Gewinnen und Verlieren des Fokus von Elementen.	Ereignisse, die auf `Element`, `Window` ausgelöst werden.
Formular	Ereignisse im Zusammenhang mit Formularen, die erstellt, zurückgesetzt und gesendet werden.	Ereignisse, die auf `HTMLFormElement` ausgelöst werden.
Vollbild	Ereignisse im Zusammenhang mit der Vollbild-API. Wird verwendet, um beim Wechsel zwischen Vollbild- und Fenstermodus zu benachrichtigen und auch über Fehler, die während dieses Übergangs 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 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.
Anzeige- und Textverwaltung von HTML-Elementen	Ereignisse im Zusammenhang mit der Änderung des Zustands eines Display- oder Textelements.	Ereignisse, die auf `HTMLDetailsElement`, `HTMLDialogElement`, `HTMLSlotElement` ausgelöst werden.
Eingaben	Ereignisse im Zusammenhang mit HTML-Eingabefeldern, 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 losgelassen, gedrückt oder einfach nur 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 Manifesten von progressiven Web-Apps.	Ereignisse, die auf `Window` ausgelöst werden.
Medien	Ereignisse im Zusammenhang mit der Mediennutzung (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 dem Empfang einer Nachricht von einem anderen Browsing-Kontext in einem Fenster.	Ereignisse, die auf `Window` ausgelöst werden.
Maus	Ereignisse im Zusammenhang mit der Verwendung einer Computermaus. Wird verwendet, um zu benachrichtigen, wenn die Maus geklickt, doppelt geklickt wird, bei Auf- und Abbewegungen, Rechtsklicks, Bewegungen in und aus einem Element, Textauswahl usw. Zeigerereignisse bieten eine Hardware-unabhängige Alternative zu Mausevents. Drag- und Wheel-Ereignisse leiten sich von Mausevents ab.	Mausevents ausgelöst auf `Element`
Netzwerk/Verbindung	Ereignisse im Zusammenhang mit dem Herstellen und Verlieren 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 jeder leistungsbezogenen Spezifikation, die in Performance-APIs zusammengefasst ist.	Ereignisse, die auf `Performance` ausgelöst werden.
Zeiger	Ereignisse im Zusammenhang mit der Pointer Events API. Bietet hardware-unabhängige Benachrichtigung von Zeigegeräten einschließlich Maus, Touch, Stift/Stylus.	Ereignisse, die auf `Document`, `HTMLElement` ausgelöst werden.
Druck	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	Auswahl-API Ereignisse im Zusammenhang mit der Textauswahl.	Ereignis (`selectionchange`), ausgelöst auf [`HTMLTextAreaElement`](/de/docs/Web/API/HTMLTextAreaElement/selectionchange_event), [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement/selectionchange_event).
Berührung	Ereignisse im Zusammenhang mit der Touch Events API. Bietet Benachrichtigungsevents bei Interaktion mit einem berührungsempfindlichen Bildschirm (d.h. mit einem Finger 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 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 API für servergesendete Ereignisse.	Ereignisse, die auf `EventSource` ausgelöst werden.
Sprache	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 der Channel Messaging API. Wird verwendet, um auf neue Nachrichten und Nachrichtensende-Fehler zu reagieren. Service-Arbeiter können auch über andere Ereignisse benachrichtigt werden, einschließlich Push-Benachrichtigungen, Benutzer, die auf angezeigte Benachrichtigungen klicken, das Ungültigmachen eines Push-Abonnements, 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 DOM-Ereignisse selbst erstellen und auslösen. Solche Ereignisse werden üblicherweise 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. Zum Beispiel könnte das Ereignis wie folgt erstellt werden:

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

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

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

Hinzufügen benutzerdefinierter Daten – Event-Klassen ableiten

Die Event-Schnittstelle kann auch abgeleitet 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 festgelegten 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 Ereignislistenern mithilfe der benutzerdefinierten Eigenschaften abgerufen werden:

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

Ereignisaufblähung

Es ist oft wünschenswert, ein Ereignis aus einem Kind-Element auszulösen und ein übergeordnetes Element es 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));

Erstellen und dynamisches Auslösen von Ereignissen

Elemente können auf Ereignisse lauschen, 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 die Simulation eines Klicks (das heißt, das programmgesteuerte Generieren eines Klickereignisses) auf einer Checkbox unter Verwendung von DOM-Methoden. Sehen Sie sich das Beispiel in Aktion an.

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 Ereignishandlern

Es gibt zwei empfohlene Ansätze zur Registrierung von Handlern. Der Ereigniscode kann so ausgeführt werden, dass er bei einem ausgelösten Ereignis entweder dem onevent-Eigenschaft des Zielelements zugewiesen oder der Handler als Listener für das Element mit der Methode addEventListener() registriert wird. In beiden Fällen wird der Handler ein Objekt erhalten, das der Event-Schnittstelle (oder einer abgeleiteten Schnittstelle) entspricht. Der Hauptunterschied besteht darin, dass mithilfe der Event-Listener-Methoden mehrere Ereignishandler hinzugefügt (oder entfernt) werden können.

Warnung: Ein dritter Ansatz zur Einrichtung von Event-Handlern mithilfe von HTML-onevent-Attributen wird nicht empfohlen! Sie blähen das Markup auf und machen es weniger lesbar und schwerer debughbar. Weitere Informationen finden Sie unter Inline-Ereignishandler.

Verwendung von onevent-Eigenschaften

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

Um Code für Ereignishandler festzulegen, können Sie ihn einfach der entsprechenden Onevent-Eigenschaft zuweisen. Pro Element kann für jedes Ereignis nur ein Ereignishandler zugewiesen werden. Falls erforderlich, kann der Handler durch Zuweisen 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 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 Event-Schnittstelle oder leitet sich von ihr ab.

EventTarget.addEventListener

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

Hinweis: Die Fähigkeit, Event-Handler hinzuzufügen und zu entfernen, erlaubt es Ihnen beispielsweise, denselben Button in verschiedenen Situationen unterschiedliche Aktionen ausführen zu lassen. Darüber hinaus kann das Aufräumen alter/ungenutzter Ereignis-Handler in komplexeren Programmen die Effizienz verbessern.

Das folgende Beispiel zeigt, wie eine greet()-Funktion als Listener/Event-Handler für das click-Ereignis festgelegt werden kann (Sie könnten stattdessen eine anonyme Funktionsausdruck verwenden, wenn gewünscht). 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 zur Steuerung von Aspekten, wie die Ereignisse erfasst und entfernt werden, entgegennehmen. Weitere Informationen finden Sie auf der Referenzseite zu EventTarget.addEventListener.

Verwendung von AbortSignal

Eine bemerkenswerte Funktion des Ereignis-Listeners ist die Möglichkeit, ein Abbruch-Signal zu verwenden, um mehrere Ereignishandler gleichzeitig zu bereinigen.

Dies geschieht, indem dasselbe AbortSignal für den Aufruf von addEventListener() für alle Ereignishandler übergeben wird, die Sie zusammen entfernen möchten. Anschließend können Sie abort() auf den Controller mit dem Eigentum des AbortSignal aufrufen, und es wird alle Ereignishandler entfernen, 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 wie folgt entfernt werden:

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

Interaktion mehrerer Ereignishandler

Die onevent IDL-Eigenschaft (zum Beispiel element.onclick = ...) und das HTML-Onevent-Attribut (zum Beispiel <button onclick="...">) zielen beide auf den gleichen einzelnen Handler-Slot ab. HTML wird geladen, bevor JavaScript auf dasselbe Element zugreifen könnte, so dass normalerweise JavaScript das ersetzt, was in HTML angegeben ist. Mit addEventListener() hinzugefügte Handler sind unabhängig. Die Verwendung von onevent entfernt 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 am höchsten übergeordneten Element 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 können in der Capture-Phase lauschen, indem sie capture: true mit addEventListener() angeben. Innerhalb einer Phase laufen Listener in der Reihenfolge, in der sie registriert wurden. Der onevent-Handler wird registriert, wenn er zum ersten Mal ungleich null wird; spätere Neuzuweisungen ändern nur seinen Rückruf, nicht seine Position in der Reihenfolge.

Der Aufruf von Event.stopPropagation() verhindert den Aufruf von Listenern an anderen Elementen später in der Ausbreitungskette. Event.stopImmediatePropagation() verhindert auch den Aufruf der verbleibenden Listener am selben 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