addEventListener() metoda
Przykład
Dodaj detektor zdarzenia, który uruchamia się, gdy użytkownik kliknie przycisk:
document.getElementById("myBtn").addEventListener("click", displayDate); Spróbuj sam " addEventListener() Metoda przywiązuje programu obsługi zdarzeń do określonego elementu.
addEventListener() Metoda przywiązuje programu obsługi zdarzeń do elementu bez nadpisywania istniejących programów obsługi zdarzeń.
Możesz dodać wiele programów obsługi zdarzeń do jednego elementu.
Możesz dodać wiele programów obsługi zdarzeń tego samego typu do jednego elementu, czyli dwa "click" wydarzeń.
Możesz dodać detektory zdarzeń do każdego obiektu DOM nie tylko elementy HTML. tj obiektu window.
addEventListener() metoda sprawia, że łatwiej kontrolować w jaki sposób reaguje na zdarzenie bulgotanie.
Podczas korzystania z addEventListener() metody, JavaScript jest oddzielona od znaczników HTML, dla lepszej czytelności i pozwala na dodanie detektorów zdarzeń, nawet jeśli nie kontrolują znaczników HTML.
Możesz łatwo usunąć detektor zdarzeń za pomocą removeEventListener() metody.
Składnia
element .addEventListener( event, function, useCapture );Pierwszym parametrem jest rodzaj zdarzenia (jak "click" lub "mousedown" ).
Drugim parametrem jest funkcja chcemy zadzwonić po wystąpieniu zdarzenia.
Trzecim parametrem jest wartość logiczna określająca, czy użyć pęcherzyków zdarzenie lub przechwytywanie zdarzeń. Ten parametr jest opcjonalny.
Należy pamiętać, że nie należy używać "on" prefix na imprezie; użyć "click" zamiast "onclick" .
Dodawanie obsługi zdarzeń do elementu
Przykład
Alert "Hello World!" gdy użytkownik kliknie element:
element .addEventListener("click", function(){ alert("Hello World!"); }); Spróbuj sam " Można również odwołać się do funkcji o nazwie "zewnętrznego":
Przykład
Alert "Hello World!" gdy użytkownik kliknie element:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Spróbuj sam " Dodaj Wiele obsługi zdarzeń do tego samego elementu
addEventListener() Metoda pozwala na dodawanie wielu zdarzeń do tego samego elementu, bez zastępowania istniejących zdarzeń:
Przykład
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Spróbuj sam " Możesz dodać wydarzeń różnego typu do tego samego elementu:
Przykład
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Spróbuj sam " Dodawanie obsługi zdarzeń do obiektu window
addEventListener() Metoda pozwala na dodanie detektorów zdarzeń w dowolnym HTML DOM obiektu, takiego jak elementy HTML, dokument HTML obiektu window, lub innych obiektów, które obsługują zdarzenia, jak xmlHttpRequest obiektu.
Przykład
Dodaj detektor zdarzenia, który uruchamia się, gdy użytkownik zmienia rozmiar okna:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Spróbuj sam " Przekazywanie parametrów
Po przejściu wartości parametrów, należy użyć funkcji "anonimowy", który wywołuje określoną funkcję z parametrami:
Zdarzenie Bubbling lub zdarzeń Przechwytywanie?
Istnieją dwa sposoby rozmnażania wydarzeniem w HTML DOM, propagacji i przechwytywania.
Propagacja zdarzeń jest sposób definiowania kolejność elementów w przypadku wystąpienia zdarzenia. Jeśli masz <p> elementu wewnątrz <div> elementu, a użytkownik kliknie <p> elementu, który to element na "click" event powinien zajmować się w pierwszej kolejności?
W propagacji zdarzenia śródmiejskiego większości elementu jest obsługiwany, a następnie zewnętrzna: the <p> zdarzenia kliknięcia elementu jest obsługiwany po pierwsze, a następnie <div> zdarzenie click elementu.
W przechwytywanie zdarzeń najbardziej zewnętrzną elementu jest obsługiwany, a potem wewnętrzna: w <div> kliknięcie elementu zdarzenia będą traktowane pierwszy, a następnie <p> zdarzenie click elementu.
Z addEventListener() metodzie można określić typ rozmnażania za pomocą "useCapture" parametr:
addEventListener( event , function , useCapture );Wartością domyślną jest false, która użyje propagację stacjonarnego, gdy wartość jest ustawiona na wartość true, zdarzenie wykorzystuje propagację przechwytywanie.
Przykład
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Spróbuj sam " removeEventListener() metoda
removeEventListener() Metoda usuwa obsługi zdarzeń, które zostały dołączone z addEventListener() metody:
Pomoc Browser
Liczby w tabeli określa się pierwsza wersja przeglądarki, której w pełni popiera te metody.
| metoda | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Uwaga: addEventListener() i removeEventListener() metody nie są obsługiwane w IE 8 i wcześniejszych wersjach oraz Opera 6.0 i wcześniejszych wersjach. Jednak w przypadku tych konkretnych wersji przeglądarek, można użyć attachEvent() metodę, aby dołączyć obsługi zdarzeń do elementu, a detachEvent() metoda, aby go usunąć:
element. attachEvent (event, function);
element. detachEvent (event,
function); Przykład
Rozwiązanie cross-browser:
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 " HTML DOM Event Object Reference
Aby uzyskać listę wszystkich zdarzeń HTML DOM, spojrzeć na nasze kompletne HTML DOM Event odwołanie do obiektu .