HTML-DOM-Dokument addEventListener()
Beispiele
Fügen Sie dem Dokument ein Click-Ereignis hinzu:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Einfachere Syntax:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Weitere Beispiele unten.
Definition und Verwendung
Die addEventListener()
Methode hängt einen Ereignishandler an das Dokument an.
Siehe auch:
Das HTML-DOM-EventListener-Tutorial
Die Methode document removeEventListener()
Syntax
document.addEventListener(event, function, useCapture)
Parameter
Parameter | Description |
event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Rückgabewert
NONE |
Mehr Beispiele
Sie können dem Dokument viele Ereignis-Listener hinzufügen:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Sie können verschiedene Arten von Ereignissen hinzufügen:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Verwenden Sie beim Übergeben von Parametern eine "anonyme Funktion", um eine Funktion mit den Parametern aufzurufen:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Ändern Sie die Hintergrundfarbe des Dokuments:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Verwenden der Methode removeEventListener():
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Browser-Unterstützung
document.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 |