Najnowsze tutoriale tworzenie stron internetowych
 

HTML DOM addEventListener() Method

<Element Przedmiot

Przykład

Dołączanie zdarzenie click na <button> elementu. Gdy użytkownik kliknie na przycisk, wyjście "Hello World" w <p> elementu o id = „demo”:

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
Spróbuj sam "

Więcej "Try it Yourself" przykłady poniżej.

Definicja i Wykorzystanie

addEventListener() Sposób przykłada obsługi zdarzeń do określonego elementu.

Wskazówka: Użyj removeEventListener() metody, aby usunąć obsługi zdarzeń, który został dołączony z addEventListener() metody.

Wskazówka: Użyj dokumentu. addEventListener() metoda, aby dołączyć obsługi zdarzeń do dokumentu.

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

element .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:
  • prawda - Moduł obsługi zdarzeń jest wykonywany w fazie przechwytywania
  • fałszywie domyślny. Moduł obsługi zdarzeń jest wykonywany w fazie propagacji

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)
Przykłady

Więcej przykładów

Przykład

Można również odwołać się do zewnętrznego "named" funkcji.

Ten przykład pokazuje, jak wykonać funkcję, gdy użytkownik kliknie na <button> element:

document.getElementById("myBtn").addEventListener("click", myFunction);

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
Spróbuj sam "

Przykład

Możesz dodać wiele imprez do tego samego elementu, bez nadpisywania istniejących zdarzeń.

Ten przykład pokazuje, jak dodać dwa zdarzenia kliknięcia na tym samym <button> element:

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
Spróbuj sam "

Przykład

Możesz dodać zdarzenia różnych typów do tego samego elementu.

Ten przykład pokazuje, jak dodać wiele wydarzeń na tym samym <button> element:

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").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.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
Spróbuj sam "

Przykład

Zmienić kolor tła <button> element:

document.getElementById("myBtn").addEventListener("click", function(){
    this.style.backgroundColor = "red";
});
Spróbuj sam "

Przykład

Korzystanie z opcjonalnego parametru użyj przechwytu wykazać różnicę między bulgotanie i przechwytywania:

document.getElementById("myDiv").addEventListener("click", myFunction, true);
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 <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Remove the event handler from <div>
document.getElementById("myDIV").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:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}
Spróbuj sam "

Podobne strony

JavaScript Tutorial: HTML DOM EventListener

HTML DOM: dokument. addEventListener()

<Element Przedmiot