Metoda HTML DOM addEventListener ()

Przykłady

Aby <button> Element dodać zdarzenie click. Gdy użytkownik kliknie przycisk na id = "demo" w <p> wyjściowym elementem "Hello World":

document.getElementById ( "myBtn"). addEventListener ( "click", function () {
. Document.getElementById ( "demo") innerHTML = "Hello World";
});

Spróbuj »

Definicja i Wykorzystanie

Metoda addEventListener () służy do dodawania obsługi zdarzeń do określonego elementu.

Wskazówka: Użyj removeEventListener () metodę, aby usunąć metodę addEventListener () w celu dodania obsługi zdarzeń.

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji metody.

sposób
addEventListener ()	1,0	9,0	1,0	1,0	7,0

Uwaga: Internet Explorer 8 i wcześniejsze wersje IE nie obsługuje metody addEventListener () ,, Opera 7.0 i wcześniejsze wersje nie obsługują Opera. Jednak one nie obsługują funkcji przeglądarki, można użyć metody attachEvent (), aby dodać moduł obsługi zdarzeń (patrz: "Więcej przykładów" dla rozwiązania cross-browser).

gramatyka

Element .addEventListener (zdarzenie, funkcja, useCapture )

parametr Wartość

parametry	opis
wydarzenie	Koniecznością. Ciąg znaków określający nazwę zdarzenia. Uwaga: Nie używaj "on" prefiks. Na przykład za pomocą "kliknięcia", zamiast "onclick". Wskazówka: Wszystkie zdarzenia HTML DOM, można zobaczyć nasze kompletne HTML DOM Event Object Reference .
funkcja	Koniecznością. Funkcja mają być wykonywane, gdy określone zdarzenie wyzwala. Gdy obiekt zdarzenia jako pierwszy argument przekazany do funkcji. Obiekt typu zdarzenia zależy od konkretnego przypadku. Na przykład, "kliknij" zdarzenie należy MouseEvent (zdarzenie myszy) obiekt.
useCapture	Opcjonalne. Wartość logiczna określająca, czy wykonanie zdarzeń w zdobyciu lub fazę propagacji. Możliwe wartości: prawda - obsługi zdarzenia wykonywane w fazie przechwytywania fałszywie fałszywie domyślna. obsługi zdarzeń wykonać w fazie propagacji

dane techniczne

Wersja DOM:	DOM Level 2 Events
Zwraca:	Nie zwraca wartości
rekord:	Firefox 6 i Opera 11.60 w useCapture parametr jest opcjonalny. (W Chrome, IE i Safari zawsze była opcja).

Więcej przykładów

Przykłady

Można odwołać funkcję zewnętrznego o nazwie funkcji.

Ten przykład pokazuje, jak wykonać, gdy użytkownik kliknie przycisk <> elementu funkcji:

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

Funkcja myFunction () {
. Document.getElementById ( "demo") innerHTML = "Hello World";
}

Spróbuj »

Przykłady

Można dodać dowolną liczbę zdarzeń w dokumencie, dodając zdarzenie nie będzie zastąpić istniejący wydarzenie.

Ten przykład pokazuje, jak dodać dwa zdarzenie click w <button> element:

. Document.getElementById ( "myBtn") addEventListener ( "click", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "click", someOtherFunction);

Spróbuj »

Przykłady

Można dodawać różne typy zdarzeń w tym samym elemencie.

Ten przykład pokazuje, jak dodać wiele zdarzeń z <button> element:

. Document.getElementById ( "myBtn") addEventListener ( "mouseover", MyFunction);
. Document.getElementById ( "myBtn") addEventListener ( "click", someOtherFunction);
. Document.getElementById ( "myBtn") addEventListener ( "mouseout" someOtherFunction);

Spróbuj »

Przykłady

Po przejściu wartości parametru, należy użyć wywołania funkcji z parametrami "funkcją anonimową":

document.getElementById ( "myBtn"). addEventListener ( "click", function () {
myFunction (P1, P2);
});

Spróbuj »

Przykłady

Modyfikowanie <button> elementy tła:

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

Spróbuj »

Przykłady

Za pomocą opcjonalnych parametrów w celu wykazania różnych useCapture bulgotanie i przechwytywania fazy:

. Document.getElementById ( "myDiv") addEventListener ( "click", myFunction, true);

Spróbuj »

Przykłady

Stosując metodę removeEventListener (), aby usunąć metodę addEventListener () w celu dodania obsługi zdarzeń:

// Dodaj <div> obsługi zdarzeń
. Document.getElementById ( "myDiv") addEventListener ( "mousemove" myFunction);

// Usuń <div> obsługi zdarzeń
. Document.getElementById ( "myDiv") removeEventListener ( "mousemove" myFunction);

Spróbuj »

Przykłady

Jeśli Twoja przeglądarka nie obsługuje metodę addEventListener (), metodę attachEvent () można użyć zamiast.

Poniższy przykład demonstruje rozwiązania w różnych przeglądarkach:

var x = document.getElementById ( "myBtn");
if (x.addEventListener) {// wszystkimi popularnymi przeglądarkami, z wyjątkiem IE 8 i wcześniejsze wersje IE
x.addEventListener ( "click", myFunction);
} Else if (x.attachEvent) {// IE 8 i wcześniejsze wersje IE
x.attachEvent ( "onclick", myFunction);
}

Spróbuj »