HTML DOM addEventListener()-Methode

Definition und Verwendung

addEventListener() Das Verfahren fgt Ereignisbehandlungsprogramme an Elemente hinzu.

Beispiel

Beispiel 1

Fügen Sie dem <button>-Element ein click-Ereignis hinzu:

element.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Probieren Sie es selbst aus

Beispiel 2

Kompakterer Code:

element.addEventListener("click", function() {
  document.getElementById("demo").innerHTML = "Hello World";
});

Probieren Sie es selbst aus

Mehr Beispiele finden Sie unten auf der Seite.

Syntax

element.addEventListener(type, function, useCapture)

Parameter

Parameter Beschreibung
type

Erforderlich. Der Name des Ereignisses.

Verwenden Sie keine "on"-Präfix.

Verwenden Sie "click" anstelle von "onclick".


Vollständige Liste der DOM-Ereignisse
function Erforderlich. Die Funktion, die beim Ereignis ausgelöst wird.
useCapture

Optional (Standardwert = false).

  • false - Der Handler wird im Blasenbereich ausgeführt.
  • true - Der Handler wird im Kapturenbereich ausgeführt.

Rückgabewert

Keine.

Technische Details

Diese Methode fügt die angegebene Ereignisbeobachterfunktion zur aktuellen Knotenbeobachterkombination hinzu, um spezifische Ereignistypen zu verarbeiten. type Ereignisse. useCapture wird auf true gesetzt, wird der Beobachter als Kapturenerreignisbeobachter registriert. Wenn useCapture wird auf false gesetzt, wird sie als normaler Ereignisbeobachter registriert. Wenn

addEventListener() kann mehrmals aufgerufen werden, um mehrere Ereignisbeobachter desselben Typs auf denselben Knoten zu registrieren. Beachten Sie jedoch, dass das DOM die Reihenfolge der Aufrufe mehrerer Ereignisbeobachter nicht bestimmen kann.

wenn eine Ereignisbeobachterfunktion mit gleicher type und useCapture wenn der Parameter zweimal registriert wird, wird die zweite Registrierung ignoriert. Wenn ein neuer Ereignisbeobachter auf einem Knoten registriert wird, während ein Ereignis auf diesem Knoten bearbeitet wird, wird der neue Ereignisbeobachter für dieses Ereignis nicht aufgerufen.

wenn Node.cloneNode() Methode oder Document.importNode() wenn eine Document-Knotenmethode kopiert wird, werden keine für den ursprünglichen Knoten registrierten Ereignisbeobachter kopiert.

Diese Methode ist auch Dokument und Fenster auf dem Objekt definiert und funktionieren ähnlich.

Mehr Beispiele

Beispiel 3

Sie können viele Ereignisse zu einem Element hinzufügen:

element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);

Probieren Sie es selbst aus

Beispiel 4

Sie können verschiedene Ereignisse zu einem Element hinzufügen:

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);

Probieren Sie es selbst aus

Beispiel 5

Um Parameterwerte zu übergeben, verwenden Sie "Anonyme Funktionen":

element.addEventListener("click", function() {
  myFunction(p1, p2);
});

Probieren Sie es selbst aus

Beispiel 6

Ändern Sie die Hintergrundfarbe des <button>-Elements:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Probieren Sie es selbst aus

Beispiel 7

Unterschiede zwischen Blasenbildung und Erfassung:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Probieren Sie es selbst aus

Beispiel 8

Eventhandler löschen:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Probieren Sie es selbst aus

Browserunterstützung

element.addEventListener() Es ist eine Funktion von DOM Level 2 (2001).

Es wird von allen Browsern vollständig unterstützt:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützung 9-11 Unterstützung Unterstützung Unterstützung Unterstützung

Verwandte Seiten

Elementmethoden:

addEventListener() - Methode

removeEventListener() - Methode

Dokumentmethoden:

addEventListener() - Methode

removeEventListener() - Methode

Tutorial:

HTML DOM EventListener

Vollständige Liste der DOM-Ereignisse