HTML-DOM-Element addEventListener()
Beispiele
Fügen Sie einem <button>-Element ein Click-Ereignis hinzu:
element.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Kompakterer Code:
element.addEventListener("click", function() {
document.getElementById("demo").innerHTML = "Hello World";
});
Weitere Beispiele unten.
Definition und Verwendung
Die addEventListener()Methode hängt einen Ereignishandler an das Element an.
Siehe auch:
Die Methode element.removeEventListener()
Die Methode document.addEventListener()
Die Methode document.removeEventListener()
Tutorials
Syntax
element.addEventListener(event, function, useCapture)
Parameter
| Parameter | Description |
| event | Required. The name of the event. Do not use the "on" prefix. Use "click" not "onclick". The Complete List of DOM Events. |
| function | Required. The function to run when the event occurs. |
| useCapture |
Optional (default = false).false - The handler is executed in the bubbling phase.true - The handler is executed in the capturing phase.
|
Rückgabewert
| KEINER |
Mehr Beispiele
Sie können demselben Element viele Ereignisse hinzufügen:
element.addEventListener("click", myFunction1);
element.addEventListener("click", myFunction2);
Sie können demselben Element verschiedene Ereignisse hinzufügen:
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", someOtherFunction);
element.addEventListener("mouseout", someOtherFunction);
Um Parameterwerte zu übergeben, verwenden Sie eine "anonyme Funktion":
element.addEventListener("click", function() {
myFunction(p1, p2);
});
Ändern Sie die Hintergrundfarbe eines <button>-Elements:
element.addEventListener("click", function() {
this.style.backgroundColor = "red";
});
Der Unterschied zwischen Blubbern und Fangen:
element1.addEventListener("click", myFunction, false);
element2.addEventListener("click", myFunction, true);
Entfernen Sie einen Event-Handler:
element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);
Browser-Unterstützung
element.addEventListener()ist eine Funktion von DOM Level 2 (2001).
Es wird in allen Browsern vollständig unterstützt:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |