Ereignisverarbeitung (Überblick)

Ereignisse werden in und/oder unter den Seiten für die JavaScript-Objekte dokumentiert, die sie auslösen. Um beispielsweise herauszufinden, welche Ereignisse im Browserfenster oder im aktuellen Dokument ausgelöst werden, sehen Sie sich die Ereignisbereiche in Window und Document an.

Sie können die Ereignisreferenz verwenden, um herauszufinden, welche JavaScript-Objekte für bestimmte APIs, z.B. Animation, Medien usw., Ereignisse auslösen.

Es gibt zwei empfohlene Ansätze zur Registrierung von Behandlern. Ereignisbehandlungs­code kann ausgeführt werden, wenn ein Ereignis durch Zuweisung zum entsprechenden onevent Eigenschaft des Zielelements ausgelöst wird, oder indem der Behandler als Listener für das Element mit der Methode addEventListener() registriert wird. In beiden Fällen erhält der Behandler ein Objekt, das der Event Schnittstelle (oder einer abgeleiteten Schnittstelle) entspricht. Der Hauptunterschied besteht darin, dass mit den Methoden zur Ereignisüberwachung mehrere Ereignisbehandler hinzugefügt (oder entfernt) werden können.

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

Um Ereignisbehandlungs­code zu setzen, können Sie ihn einfach der entsprechenden onevent Eigenschaft zuweisen. Für jedes Ereignis in einem Element kann nur ein Ereignisbehandler zugewiesen werden. Falls erforderlich, kann der Behandler durch die Zuweisung einer anderen Funktion zur gleichen Eigenschaft ersetzt werden.

Unten zeigen wir, wie eine einfache 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 ein Objekt, das das Ereignis darstellt, als erstes Argument an den Ereignisbehandler übergeben wird. Dieses Ereignisobjekt implementiert entweder die Event Schnittstelle oder ist von ihr abgeleitet.

Der flexibelste Weg, einen Ereignisbehandler auf einem Element zu setzen, ist die Verwendung der EventTarget.addEventListener Methode. Dieser Ansatz ermöglicht es, mehreren Listenern einem Element zuzuweisen, und ermöglicht es, Listener bei Bedarf zu entfernen (mithilfe von EventTarget.removeEventListener).

Unten zeigen wir, wie eine einfache greet() Funktion als Listener/Ereignisbehandler für das click Ereignis gesetzt werden kann (Sie könnten, falls gewünscht, einen anonymen Funktionsausdruck anstelle einer benannten Funktion verwenden). Beachten Sie erneut, dass das Ereignis als erstes Argument an den Ereignisbehandler ü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 zu kontrollieren, wie die Ereignisse erfasst und entfernt werden. Weitere Informationen finden Sie auf der Referenzseite zu EventTarget.addEventListener.

Verwendung eines Abbruchsignals

Eine bemerkenswerte Funktion eines Ereignislisteners ist die Möglichkeit, ein Abbruchsignal zu verwenden, um mehrere Ereignisbehandler gleichzeitig zu bereinigen.

Dies geschieht, indem dasselbe AbortSignal an den addEventListener() Aufruf für alle Ereignisbehandler übergeben wird, die Sie gemeinsam entfernen möchten. Sie können dann abort() auf dem Controller aufrufen, der das AbortSignal besitzt, und es werden alle Ereignisbehandler entfernt, die mit diesem Signal hinzugefügt wurden. Zum Beispiel, um einen Ereignisbehandler 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

Dann kann der durch den obigen Code erstellte Ereignisbehandler so entfernt werden:

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