Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

EventTarget: addEventListener() Methode

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

* Some parts of this feature may have varying levels of support.

Hinweis: Diese Funktion ist in Web Workers verfügbar.

Die addEventListener()-Methode des EventTarget-Interfaces richtet eine Funktion ein, die immer aufgerufen wird, wenn das angegebene Ereignis an das Ziel geliefert wird.

Häufige Ziele sind Element oder dessen Kinder, Document und Window, aber das Ziel kann jedes Objekt sein, das Ereignisse unterstützt (z.B. IDBRequest).

Hinweis: Die Methode addEventListener() ist der empfohlene Weg, um einen Ereignis-Listener zu registrieren. Die Vorteile sind wie folgt:

  • Sie erlaubt es, mehr als einen Handler für ein Ereignis hinzuzufügen. Dies ist besonders nützlich für Bibliotheken, JavaScript-Module oder andere Arten von Code, die gut mit anderen Bibliotheken oder Erweiterungen funktionieren müssen.
  • Im Gegensatz zur Verwendung einer onXYZ-Eigenschaft gibt sie Ihnen eine feinere Kontrolle über die Phase, in der der Listener aktiviert wird (Capturing vs. Bubbling).
  • Sie funktioniert mit jedem Ereignisziel, nicht nur mit HTML- oder SVG-Elementen.

Die Methode addEventListener() funktioniert, indem eine Funktion oder ein Objekt, das eine handleEvent()-Funktion implementiert, zur Liste der Ereignis-Listener für den angegebenen Ereignistyp auf dem EventTarget hinzugefügt wird, auf dem sie aufgerufen wird. Wenn die Funktion oder das Objekt bereits in der Liste der Ereignis-Listener für dieses Ziel vorhanden ist, wird die Funktion oder das Objekt nicht ein zweites Mal hinzugefügt.

Hinweis: Wenn eine bestimmte anonyme Funktion in der Liste der für ein bestimmtes Ziel registrierten Ereignis-Listener ist und später im Code eine identische anonyme Funktion in einem addEventListener-Aufruf angegeben wird, wird die zweite Funktion auch der Liste der Ereignis-Listener für dieses Ziel hinzugefügt.

Tatsächlich sind anonyme Funktionen nicht identisch, selbst wenn sie unter Verwendung desselben unveränderten Quellcodes wiederholt definiert werden, auch wenn sie in einer Schleife verwendet werden.

Das wiederholte Definieren derselben unbenannten Funktion kann in solchen Fällen problematisch sein. (Siehe