DOM-Ereignisse

Ereignisse werden ausgelöst, um den Code über "interessante Änderungen" zu informieren, die die Codeausführung beeinflussen können. Diese können durch Benutzerinteraktionen wie das Verwenden einer Maus oder das Ändern der Fenstergröße, Zustandsänderungen der zugrunde liegenden Umgebung (z. B. niedriger Batteriestand oder Medienereignisse des Betriebssystems) und andere Ursachen entstehen.

Jedes Ereignis wird durch ein Objekt dargestellt, das auf der Event Schnittstelle basiert und möglicherweise zusätzliche benutzerdefinierte Felder und/oder Funktionen enthält, 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 Event.

Dieses Thema bietet ein Verzeichnis der 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).	Animationsereignisse ausgelöst auf `Document`, `Window`, `HTMLElement`.
Asynchrones Datenabrufen	Ereignisse im Zusammenhang mit dem Abrufen von Daten.	Ereignisse ausgelöst auf `AbortSignal`, `XMLHttpRequest`, `FileReader`.
Zwischenablage	Ereignisse im Zusammenhang mit der Clipboard API. Wird verwendet, um zu benachrichtigen, wenn Inhalte ausgeschnitten, kopiert oder eingefügt werden.	Ereignisse ausgelöst auf `Document`, `Element`, `Window`.
Komposition	Ereignisse im Zusammenhang mit der Komposition; indirektes Texteingeben (anstatt mit normalen Tastaturanschlägen). Zum Beispiel über eine Spracherkennungssoftware eingegebener Text oder spezielle Tastenkombinationen, die Tastatureingaben modifizieren, um neue Zeichen in einer anderen Sprache darzustellen.	Ereignisse ausgelöst auf `Element`.
CSS-Übergang	Ereignisse im Zusammenhang mit CSS-Übergängen. Stellt Benachrichtigungsevents bereit, wenn CSS-Übergänge starten, stoppen, abgebrochen werden usw.	Ereignisse ausgelöst auf `Document`, `HTMLElement`, `Window`.
Datenbank	Ereignisse im Zusammenhang mit Datenbankoperationen: Öffnen, Schließen, Transaktionen, Fehler usw.	Ereignisse ausgelöst auf `IDBDatabase`, `IDBOpenDBRequest`, `IDBRequest`, `IDBTransaction`.
DOM-Mutation	Ereignisse im Zusammenhang mit Änderungen an der Document Object Model (DOM)-Hierarchie und Nodes.	Warnung: Mutation Events sind veraltet. Mutation Observers sollten stattdessen verwendet werden.
Drag & Drop, Maus-Scroll	Ereignisse im Zusammenhang mit der Nutzung der HTML-Drag-and-Drop-API und Maus-Scroll-Ereignisse. Drag und Scroll-Ereignisse stammen von Mausevents ab. Während sie ausgelöst werden, wenn das Mausrad oder Drag & Drop verwendet wird, können sie auch mit anderer geeigneter Hardware verwendet werden.	Drag-Ereignisse ausgelöst auf `Document` Scroll-Ereignisse ausgelöst auf `Element`
Fokus	Ereignisse im Zusammenhang mit dem Fokus-Gewinnen und -Verlieren von Elementen.	Ereignisse ausgelöst auf `Element`, `Window`.
Formular	Ereignisse im Zusammenhang mit dem Erstellen, Zurücksetzen und Absenden von Formularen.	Ereignisse ausgelöst auf `HTMLFormElement`.
Vollbild	Ereignisse im Zusammenhang mit der Fullscreen API. Wird verwendet, um zu benachrichtigen, wenn zwischen den Vollbild- und Fenster-Modi gewechselt wird und auch bei währenddessen auftretenden Fehlern.	Ereignisse ausgelöst auf `Document`, `Element`.
Gamepad	Ereignisse im Zusammenhang mit der Gamepad API.	Ereignisse ausgelöst auf `Window`.
Gesten	Touch-Ereignisse werden empfohlen zur Implementierung von Gesten.	Ereignisse 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 ausgelöst auf `Window`.
HTML-Element-Inhaltsanzeige-Management	Ereignisse im Zusammenhang mit der Änderung des Zustands eines Anzeige- oder Textelements.	Ereignisse ausgelöst auf `HTMLDetailsElement`, `HTMLDialogElement`, `HTMLSlotElement`.
Eingaben	Ereignisse im Zusammenhang mit HTML-Eingabeelementen, z. B. `<input>`, `<select>`, oder `<textarea>`.	Ereignisse ausgelöst auf `HTMLElement`, `HTMLInputElement`.
Tastatur	Ereignisse im Zusammenhang mit der Nutzung einer Tastatur. Wird verwendet, um zu benachrichtigen, wenn Tasten gedrückt, losgelassen oder nur gedrückt werden.	Ereignisse ausgelöst auf `Document`, `Element`.
Laden/Entladen von Dokumenten	Ereignisse im Zusammenhang mit dem Laden und Entladen von Dokumenten.	Ereignisse ausgelöst auf `Document` und `Window`.
Manifeste	Ereignisse im Zusammenhang mit der Installation von progressive Web App Manifeste.	Ereignisse 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 ausgelöst auf `ScriptProcessorNode`, `HTMLMediaElement`, `AudioTrackList`, `AudioScheduledSourceNode`, `MediaRecorder`, `MediaStream`, `MediaStreamTrack`, `VideoTrackList`, `HTMLTrackElement`, `OfflineAudioContext`, `TextTrack`, `TextTrackList`, Element/audio, Element/video.
Nachrichtenübermittlung	Ereignisse im Zusammenhang mit dem Empfang einer Nachricht in einem Fenster von einem anderen Browsing-Kontext.	Ereignisse ausgelöst auf `Window`.
Maus	Ereignisse im Zusammenhang mit der Nutzung einer Computermaus. Wird verwendet, um zu benachrichtigen, wenn die Maus geklickt, doppelt geklickt wird, hoch- und runterbewegt wird, Rechtsklick, Bewegungen in und aus einem Element, Textauswahl usw. Pointer-Ereignisse bieten eine hardwareunabhängige Alternative zu Mausevents. Drag und Scroll-Ereignisse stammen von Mausevents ab.	Mausevents ausgelöst auf `Element`
Netzwerk/Verbindung	Ereignisse im Zusammenhang mit dem Gewinnen und Verlieren von Netzwerkverbindungen.	Ereignisse ausgelöst auf `Window`. Ereignisse ausgelöst auf `NetworkInformation` (Netzwerkinformationen-API).
Zahlungen	Ereignisse im Zusammenhang mit der Payment Request API.	Ereignisse ausgelöst auf `PaymentRequest`, `PaymentResponse`.
Performance	Ereignisse im Zusammenhang mit jeglichen performancebezogenen Spezifikationen, gruppiert zu Performance-APIs.	Ereignisse ausgelöst auf `Performance`.
Zeiger	Ereignisse im Zusammenhang mit der Pointer Events API. Bietet hardwareunabhängige Benachrichtigung von Eingabegeräten wie Maus, Touch, Stift/Zeichenstift.	Ereignisse ausgelöst auf `Document`, `HTMLElement`.
Drucken	Ereignisse im Zusammenhang mit dem Drucken.	Ereignisse ausgelöst auf `Window`.
Promise-Zurückweisungen	Ereignisse, die in den globalen Skriptkontext gesendet werden, wenn ein JavaScript-Promise abgelehnt wird.	Ereignisse ausgelöst auf `Window`.
Sockets	Ereignisse im Zusammenhang mit der WebSockets API.	Ereignisse ausgelöst auf `WebSocket`.
SVG	Ereignisse im Zusammenhang mit SVG-Bildern.	Ereignisse ausgelöst auf `SVGElement`, `SVGAnimationElement`, `SVGGraphicsElement`.
Textauswahl	Selection API Ereignisse im Zusammenhang mit der Auswahl von Text.	Ereignis (`selectionchange`) ausgelöst 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. Bietet Benachrichtigungsevents für die Interaktion mit einem berührungsempfindlichen Bildschirm (z. B. mit einem Finger oder Stift). Nicht im Zusammenhang mit der Force Touch API.	Ereignisse ausgelöst auf `Document`, `Element`.
Virtuelle Realität	Ereignisse im Zusammenhang mit der WebXR Device API. Warnung: Die WebVR API (und damit verbundene `Window` Ereignisse) sind veraltet.	Ereignisse ausgelöst auf `XRSystem`, `XRSession`, `XRReferenceSpace`.
RTC (Echtzeitkommunikation)	Ereignisse im Zusammenhang mit der WebRTC API.	Ereignisse ausgelöst auf `RTCDataChannel`, `RTCDTMFSender`, `RTCIceTransport`, `RTCPeerConnection`.
Server-sent events	Ereignisse im Zusammenhang mit der Server sent events API.	Ereignisse ausgelöst auf `EventSource`.
Sprache	Ereignisse im Zusammenhang mit der Web Speech API.	Ereignisse ausgelöst auf `SpeechSynthesisUtterance`.
Arbeiter (Workers)	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 Nachrichtenversand zu reagieren. Service-Worker können auch über andere Ereignisse benachrichtigt werden, einschließlich Push-Benachrichtigungen, Benutzer, die auf angezeigte Benachrichtigungen klicken, dass das Push-Abonnement ungültig geworden ist, Löschen von Elementen aus dem Inhaltsindex usw.	Ereignisse ausgelöst auf `ServiceWorkerGlobalScope`, `DedicatedWorkerGlobalScope`, `SharedWorkerGlobalScope`, `WorkerGlobalScope`, `Worker`, `BroadcastChannel`, `MessagePort`.

Erstellen und Senden von Ereignissen

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

Erstellen benutzerdefinierter Ereignisse

Ereignisse können wie folgt mit dem Event-Konstruktor 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 übermitteln. Zum Beispiel könnte das Ereignis wie folgt erstellt werden:

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

Dies ermöglicht dann den Zugriff auf die zusätzlichen Daten im Ereignis-Listener:

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

Hinzufügen benutzerdefinierter Daten – Erweitern von Event

Die Event-Schnittstelle kann auch erweitert 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 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-Bubbling

Es ist oft wünschenswert, ein Ereignis von einem Kind-Element auszulösen und von einem Vorfahren abfangen zu lassen; optional können Sie Daten zusammen mit dem Ereignis übermitteln:

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 Senden von Ereignissen dynamisch

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 eingebauten Ereignissen

Dieses Beispiel zeigt, wie man einen Klick (d.h. ein programmgesteuert erzeugtes Klick-Ereignis) auf ein Kontrollkästchen mit DOM-Methoden simuliert. 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");
  }
}

Registrieren von Ereignishandlern

Es gibt zwei empfohlene Ansätze zur Registrierung von Handlern. Der Code für den Ereignishandler kann entweder durch Zuweisen zum entsprechenden onevent-Eigenschaft des Ziel-Elements oder durch Registrieren des Handlers als Listener für das Element mit der Methode addEventListener() ausgeführt werden, wenn ein Ereignis ausgelöst wird. In beiden Fällen erhält der Handler ein Objekt, das der Event-Schnittstelle (oder einer abgeleiteten Schnittstelle) entspricht. Der Hauptunterschied ist, dass mit den Methoden zum Hinzufügen von Event-Listenern mehrere Ereignishandler hinzugefügt (oder entfernt) werden können.

Warnung: Ein dritter Ansatz zum Setzen 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 Event Handlers.

Verwendung von onevent-Eigenschaften

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

Um Ereignishandler-Code festzulegen, können Sie ihn einfach der entsprechenden onevent-Eigenschaft zuweisen. Es kann für jedes Ereignis in einem Element nur ein Ereignishandler zugewiesen werden. Falls nötig, kann der Handler durch Zuweisen einer anderen Funktion zur selben Eigenschaft ersetzt werden.

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

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

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

btn.onclick = greet;

Beachten Sie, dass dem Ereignishandler ein Objekt, das das Ereignis darstellt, als erstes Argument übergeben wird. Dieses Ereignisobjekt implementiert entweder die Event-Schnittstelle oder leitet sich von ihr ab.

EventTarget.addEventListener

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

Hinweis: Die Fähigkeit, Ereignishandler hinzuzufügen und zu entfernen, ermöglicht Ihnen beispielsweise, die gleiche Schaltfläche unter verschiedenen Umständen unterschiedliche Aktionen ausführen zu lassen. Darüber hinaus kann das Bereinigen alter/verwendeter Ereignishandler bei 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 eine anonyme Funktionsausdruck anstelle einer benannten Funktion verwenden, falls 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 annehmen, um Aspekte davon zu steuern, wie die Ereignisse erfasst und entfernt werden. Weitere Informationen finden Sie auf der Referenzseite EventTarget.addEventListener.

Verwendung von AbortSignal

Eine bemerkenswerte Funktionalität von Event-Listenern ist die Fähigkeit, ein Abbruchs-Signal zu verwenden, um mehrere Ereignishandler gleichzeitig zu bereinigen.

Dies geschieht, indem das gleiche AbortSignal an den addEventListener()-Aufruf für alle Ereignishandler übergeben wird, die Sie zusammen entfernen möchten. Sie können dann abort() auf dem Controller aufrufen, der das AbortSignal besitzt, 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 (z.B. element.onclick = ...) und das HTML onevent Inhaltsattribut (z.B. <button onclick="...">) zielen beide auf denselben einzelnen Handler-Slot ab. HTML wird geladen, bevor JavaScript auf dasselbe Element zugreifen könnte, daher ersetzt JavaScript normalerweise, was in HTML angegeben ist. 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 Vorfahrenelement und bewegt sich den DOM-Baum nach unten, bis es das Ziel erreicht. In der Bubble-Phase bewegt sich das Ereignis in die entgegengesetzte Richtung. Ereignis-Listener hören standardmäßig in der Bubble-Phase, und sie können in der Capture-Phase hören, indem sie capture: true mit addEventListener() angeben. Innerhalb einer Phase laufen Listener in der Reihenfolge, in der sie registriert wurden. Der onevent-Handler wird das erste Mal registriert, wenn er non-null wird; spätere Neu-Zuweisungen ändern nur seinen Rückruf, nicht seine Position in der Reihenfolge.

Das Aufrufen von Event.stopPropagation() verhindert das Aufrufen von Listenern auf anderen Elementen später in der Verbreitungskette. 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