Dokument HTML DOM addEventListener()
Przykłady
Dodaj zdarzenie kliknięcia do dokumentu:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Prostsza składnia:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Więcej przykładów poniżej.
Definicja i użycie
Metoda addEventListener()
dołącza do dokumentu procedurę obsługi zdarzeń.
Zobacz też:
Samouczek HTML DOM EventListener
Metoda Document removeEventListener()
Składnia
document.addEventListener(event, function, useCapture)
Parametry
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.
|
Wartość zwrotu
NONE |
Więcej przykładów
Do dokumentu możesz dodać wiele detektorów zdarzeń:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Możesz dodać różne rodzaje wydarzeń:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Podczas przekazywania parametrów użyj "funkcji anonimowej", aby wywołać funkcję z parametrami:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Zmień kolor tła dokumentu:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Za pomocą metody removeEventListener():
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Obsługa przeglądarki
document.addEventListener
to funkcja DOM Level 2 (2001).
Jest w pełni obsługiwany we wszystkich przeglądarkach:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |