Podsumowanie
Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.
Składnia
target.addEventListener(type, listener, useCapture);
- type
- Łańcuch przedstawiający typ zdarzenia do nasłuchu.Need a link here
- listener
-
Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu
EventListenerlub pojedynczą funkcją JavaScript. - useCapture
-
Jeśli zostanie ustawione na
true,useCapturewskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typutypebędą przekazywane do naszegolistener'a zanim zostaną wysłane do innych obiektów nasłuchujących (EventTarget) znajdujących się poniżej w drzewie DOM. Zdarzenia, które propagują w górę drzewa nie uruchamiają systemu nasłuchującego (listener) ustawionego na przechwytywanie.
Dla uzyskania szczegółowego objaśnienia zobacz DOM Level 3 Events.
Przykład
<html>
<head>
<title>Przykład zdarzenia DOM</title>
<style type="text/css">
#t { border: 1px solid red }
#t1 { background-color: pink; }
</style>
<script type="text/javascript">
// Funkcja zmieniająca zawartość komórki tabeli t2
function modifyText() {
var t2 = document.getElementById("t2");
t2.firstChild.nodeValue = "Trzy";
}
// Funkcja dodająca obserwatora zdarzeń dla tabeli t
function load() {
var el = document.getElementById("t");
el.addEventListener("click", modifyText, false);
}
</script>
</head>
<body onload="load();">
<table id="t">
<tr><td id="t1">Jeden</td></tr>
<tr><td id="t2">Dwa</td></tr>
</table>
</body>
</html>
W powyższym przykładzie, funkcja modifyText() została zarejestrowana za pomocą addEventListener() do obsługi zdarzenia typu click na tabeli t. Kliknięcie w dowolnym miejscu tej tabeli rozpocznie propagowanie zdarzenia i wywoła funkcję modifyText().
Uwagi
Po co używać addEventListener?
addEventListener daje możliwość zarejestrowania obsługi zdarzenia według specyfikacji W3C DOM. Korzyści są następujące:
- Pozwala na dodanie więcej niż jednego obiektu obsługującego zdarzenie. Jest to szczególnie użyteczne przy bibliotekach DHTML czy rozszerzeniach Mozilli, które pracują, gdy uruchomione są inne biblioteki i rozszerzenia,
- Daje większą kontrolę nad etapem aktywacji obiektu nasłuchującego
listener(przechwytywanie vs. propagowanie), - Działa dla każdego elementu z DOM, a nie tylko dla elementów HTML.
Alternatywne, starsze sposoby rejestracji zdarzeń są opisane poniżej.
Dodawanie nasłuchu podczas obsługi zdarzenia
Jeśli podczas obsługi zdarzenia zostanie dodany nowy obiekt nasłuchujący to zdarzenie, nie zostanie on uruchomiony dla tego zdarzenia. Może zostać wywołany podczas dalszego etapu przepływu zdarzeń(Event flow), np. w fazie propagowania zdarzenia w górę drzewa DOM.
Identyczne obiekty nasłuchujące
Jeśli kilka identycznych obiektów nasłuchujących zostanie zarejestrowanych dla tego samego zdarzenia (EventTarget) z tymi samymi parametrami to duplikaty są ignorowane. Obiekt nasłuchujący nie będzie wywołany więcej niż jeden raz. Powielone powiązania nie muszą być usuwane ręcznie za pomocą funkcji removeEventListener, ponieważ są one usuwane automatycznie.
Wartość this
Doczepianie akcji używając addEventListener() zmienia wartość this—zauważ, że wartość this ijest przekazywana funkcji przez zdarzenie.
W powyższym przykładzie, wartość this wewnątrz modifyText() gdy zostanie wywołana ze zdarzenia onclick event jest odwołaniem do tabeli 't'. Jeśli obsługa zdarzenia onclick jest dodana w źródle HTML:
<table id="t" onclick="modifyText();"> ... </table>
to wartość this wewnątrz funkcji modifyText() wywołanej z poziomu zdarzenia onclick będzie odwołaniem od obiektu globalnego(window).
Internet Explorer
W IE 8 i niższych należy użyć attachEvent zamiast standardowego addEventListener. By wspierać IE, powyższy przykład może zostać zmodyfikowany do:
if (el.addEventListener){
el.addEventListener('click', modifyText, false);
} else if (el.attachEvent){
el.attachEvent('onclick', modifyText);
}
Starsze sposoby dołączania zdarzeń
addEventListener() zostało wprowadzone wraz ze specyfikacją DOM 2 Events. Wcześniej, zdarzenia były dołączone jak pokazano poniżej:
// Using a function reference—note lack of '()'
el.onclick = modifyText;
// Używając deklaracji funkcji
element.onclick = function(){
// ... logika funkcji ...
};
Ta metoda zastępuje istniejącą obsługę zdarzenia onclick na elemencie jeśli jest jakakolwiek. Podobnie do innych zdarzeń 'on' takich jak onblur, onkeypress, i tak dalej.
Ponieważ była to istotna część DOM 0, ta metoda jest bardzo szeroko wspierana i nie wymaga specjalnych kodów do różnych przeglądarek; stąd też jest to normalnie używana do dynamicznego zaczepienia obsługi zdarzenia jeśli nie potrzeba dodatkowych możliwości addEventListener().