Skip to main content

Visit Mozilla.org

DOM:element.addEventListener

z Mozilla Developer Center, polskiego centrum programistów Mozilli.

« Dokumentacja Gecko DOM

UWAGA: Tłumaczenie tej strony nie zostało zakończone.
Może być ona niekompletna lub wymagać korekty.
Chcesz pomóc? | Dokończ tłumaczenie | Sprawdź ortografię | Więcej takich stron...

Spis treści

[edytuj] Podsumowanie

Metoda addEventListener pozwala zarejestrować obserwatora zdarzeń dla określonego typu zdarzenia na elemencie.

[edytuj] Składnia 

target.addEventListener(type, listener, useCapture);
type 
Łańcuch przedstawiający typ zdarzenia do nasłuchu.
listener 
Obiekt, który otrzymuje zawiadomienie, gdy nastąpi zdarzenie określonego typu. Musi być zaimplementowanym obiektem interfejsu EventListener lub pojedynczą funkcją JavaScript.
useCapture 
Jeśli zostanie ustawione na true, useCapture wskazuje, że użytkownik chce przechwytywać zdarzenia. Po rozpoczęciu przechwytywania, wszystkie zdarzenia typu type będą przekazywane do naszego listener'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ę trzewa nie uruchamiają systemu nasłuchującego (listener) ustawionego na przechwytywanie.

Dla uzyskania szczegółowego objaśnienia zobacz DOM Level 3 Events.

[edytuj] 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().

[edytuj] Uwagi

[edytuj] 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.

[edytuj] 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.

[edytuj] 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.

[edytuj] Wartość this

Attaching a function using addEventListener() changes the value of this—note that the value of this is passed to a function from the caller.

In the example above, the value of this within modifyText() when called from the onclick event is a reference to the table 't'. If the onclick handler is added in the HTML source: 

<table id="t" onclick="modifyText();">
  ...
</table>

then value of this within modifyText() when called from the onclick event will be a reference to the global (window) object.

[edytuj] Internet Explorer

In IE you have to use attachEvent rather than the standard addEventListener. To support IE, the example above can be modified to: 

if (el.addEventListener){
  el.addEventListener('click', modifyText, false); 
} else if (el.attachEvent){
  el.attachEvent('onclick', modifyText);
}

[edytuj] 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;

// Using a function statement
element.onclick = function(){
                    ...statements...
                  };

This method replaces the existing onclick event handler(s) on the element if there are any. Similarly for other 'on' events such as onblur, onkeypress, and so on.

Because it was essentially part of DOM 0, this method is very widely supported and requires no special cross–browser code; hence it is normally used to attach events dynamically unless the extra features of addEventListener() are needed.

[edytuj] Specyfikacja

DOM Level 2 Events: addEventListener

Źródło: "http://developer.mozilla.org/pl/docs/DOM:element.addEventListener"