Przykład
Dołączanie zdarzenie click do dokumentu. Gdy użytkownik kliknie w dowolnym miejscu dokumentu, wyjście "Hello World" w <p> elementu o id = „demo”:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
document. addEventListener() document. addEventListener() metoda przywiązuje programu obsługi zdarzeń do dokumentu.
Wskazówka: Użyj dokumentu. removeEventListener() metodą usuwania procedurę obsługi zdarzenia, który został załączony z addEventListener() sposobu.
Wskazówka: Użyj elementu. addEventListener() sposób mocowania obsługi zdarzeń do określonego elementu.
Wsparcie przeglądarka
Liczby w tabeli określ pierwszą wersję przeglądarki, która w pełni obsługuje metodę.
| metoda | |||||
|---|---|---|---|---|---|
| addEventListener() | 1,0 | 9.0 | 1,0 | 1,0 | 7.0 |
Uwaga: addEventListener() metoda ta nie jest obsługiwana w programie Internet Explorer 8 i wcześniejszych wersjach, a Opera 6.0 i wcześniejszych wersjach. Jednak dla tych konkretnych wersji przeglądarek, można użyć attachEvent() metodę, aby dołączyć obsługi zdarzeń (see "More Examples" below for a cross-browser solution) .
Składnia
document.addEventListener( event , function ,
useCapture )
wartości parametrów
| Parametr | Opis |
|---|---|
| event | Wymagany. Ciąg znaków, który określa nazwę zdarzenia. Uwaga: Nie używaj "on" prefiks. Na przykład za pomocą "click" zamiast "onclick" . Aby uzyskać listę wszystkich zdarzeń HTML DOM, spojrzeć na nasze kompletne HTML DOM Event Object Reference . |
| function | Wymagany. Określa funkcję uruchamiania po wystąpieniu zdarzenia. Gdy zachodzi zdarzenie, przedmiotem zdarzenie jest przekazywane do funkcji jako pierwszy parametr. Typ obiektu zdarzenia zależy od określonego zdarzenia. Na przykład, "click" wydarzenie należy do obiektu MouseEvent. |
| useCapture | Opcjonalny. Wartość logiczna określająca, czy zdarzenie powinno być wykonywane w przechwytywania lub w fazie propagacji. Możliwe wartości:
|
Szczegóły techniczne
| DOM wersja: | DOM Level 2 Events |
|---|---|
| Zwracana wartość: | Nie zwraca wartości |
| Lista zmian: | Parametr useCapture stał opcjonalnie Firefox 6 i Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Więcej przykładów
Przykład
Można również odwołać się do zewnętrznego "named" funkcji:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Spróbuj sam " Przykład
Możesz dodać wiele wydarzeń z dokumentem, bez nadpisywania istniejących zdarzeń.
Ten przykład pokazuje, jak dodać dwa zdarzenia kliknięcia na dokumencie:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Spróbuj sam " Przykład
Możesz dodać zdarzenia różnych typów do dokumentu.
Ten przykład pokazuje, jak dodać wiele wydarzeń z dokumentem:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Spróbuj sam " Przykład
Po przejściu wartości parametrów, należy użyć "anonymous function" , który wywołuje określoną funkcję z parametrami:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Spróbuj sam " Przykład
Zmienić kolor tła dokumentu <body> element:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Spróbuj sam " Przykład
Używanie removeEventListener() sposób usunąć obsługi zdarzeń, która jest przymocowany z addEventListener() sposobu:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Spróbuj sam " Przykład
Dla przeglądarek, które nie obsługują addEventListener() metody można użyć attachEvent() metody.
Ten przykład pokazuje rozwiązanie różnych przeglądarkach:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Spróbuj sam " Podobne strony
JavaScript Tutorial: HTML DOM EventListener
HTML DOM: pierwiastek. addEventListener()