Obsługa zdarzeń

Specyfikacja W3C DOM2 Events

Kiedy zachodzi jakieś zdarzenie (ang. event), można kazać przeglądarce wywołać odpowiednią funkcję, która je obsłuży (ang. event handler).

Zdarzenia to wszystko co zachodzi w związku z obiektami JavaScript (np. window) i elementami XHTML. Zdarzenia generuje np. najechanie myszą i kliknięcie na element, wybranie elementu formularza, koniec ładowania strony, itp.

XHTML posiada atrybuty takie jak onclick, onmouseover, onload, które służą do prostej obsługi zdarzeń. Tu opisana jest metoda wykorzystująca wyłącznie JavaScript i pozwalająca modyfikować obsługę zdarzeń „w locie”.

Przypisywanie funkcji obsługujących zdarzenia Bug w IE

Zdarzenie może obsłużyć każda funkcja JavaScript. Funkcje przypisuje się do obiektów lub elementów XHTML (przez DOM) za pomocą addEventListener(). 

  element.addEventListener(zdarzenie, funkcja, kolejność)

Zdarzenia

Mysz i klawiatura

click
element został kliknięty myszą. Który przycisk został kliknięty można sprawdzić w obiekcie event. Przeglądarki wywołują to zdarzenie również, gdy użytkownik aktywuje element z klawiatury. W przypadku elementów formularza kliknięcie wywołuje również bardziej specyficzne zdarzenia jak zmiana stanu (change) lub wysłanie dokumentu (submit) — w takim przypadku lepiej jest z nich skorzystać, zamiast z ogólnego kliknięcia.
dblclick
podwójne kliknięcie na element.
mousedown i mouseup
można bardziej szczegółowo reagować na kliknięcie — dokładnie gdy przycisk został wciśnięty i puszczony. Trudno jest wykorzystać te zdarzenia w parze, bo użytkownik może wcisnąć przycisk na jednym elemencie, a puścić dopiero, gdy mysz będzie na innym.
mouseover i mouseout
kursor myszy odpowiednio najechał na element lub zjechał z niego. Te zdarzenia są przydatne do pokazywania dynamicznych menu i „dymków”, ale działa tylko, gdy użytkownik używa myszy (niezależne od urządzenia są focus i blur). Dla ułatwienia obsługi warto jest nieco opóźnić ukrywanie.
keypress
wciśnięcie klawisza (analogiczne do click). Obiekt event będzie zawierał kod wciśniętego klawisza.
keydown i keyup
moment wciśnięcia i puszczenia klawisza (podobnie jak mousedown i mouseup).

Niestety dane o tym, który klawisz został wciśnięty, są zależne od przeglądarki i systemu operacyjnego. Opis niekompatybilności.

Logiczne

focus i blur
focus jest stanem, gdy użytkownik „skupia się” na danym elemencie. W praktyce to stan, gdy pole tekstowe czeka na wpisanie tekstu lub odnośnik został zaznaczony z klawiatury. Te zdarzenia zachodzą, gdy element zyskuje lub traci focus.
load i unload
zachodzą na <body>, gdy dokument zostanie załadowany do końca (load) i gdy użytkownik zamknie lub przejdzie do innego dokumentu (unload). Przeglądarki mogą blokować lub ograniczać działanie unload (broniąc się przed złośliwymi skryptami), dlatego nie można na nim polegać.
submit
Wysłanie formularza

Obiekt event Bug w IE

Funkcja obsługująca zdarzenie jako pierwszy argument dostanie obiekt, który zawiera szczegółowe informacje o zdarzeniu i pozwala kontrolować dalszy jego los.

Kolejność zdarzeń: bubbling

Rozwinąć

http://www.quirksmode.org/js/events_order.html

Opóźnienia i interwały

Nie da się zapauzować wykonywania kodu JavaScript (i nie da się czekać na zdarzenie przez ciągłe sprawdzanie czegoś w pętli, tzw. busy loop).

Można natomiast kazać wykonać kod za jakiś czas (setTimeout()) lub co jakiś czas (setInterval()).

Funkcje te przyjmują jako pierwszy parametr funkcję do wykonania, a jako drugi parametr ilość milisekund do odczekania. 

  setTimeout(
     function(){alert("Boo!")}
  ,3000);
  Zauważ, że to jest jedno wywołanie funkcji setTimeout zapisane w trzech linijkach.

Zwracany jest obiekt, który można użyć do anulowania opóźnienia lub przerwania interwału za pomocą clearTimeout() lub clearInterval().

Pętla z opóźnieniem 

 var odliczanie = 5;
 var timer = setInterval(
      function(){
          odliczanie--;
          if (!odliczanie) {clearInterval(timer);}
          alert("Odliczanie: "+odliczanie);
      }
      ,1000);
  Funkcja podana w setInterval wykona się 5 razy, co sekundę, a potem przerwie odliczanie.

this

Funkcje wykonywane przez setTimeout i setInterval nie mają referencji do obiektu this, nawet jeśli przekaże się metodę obiektu jako parametr. Jeśli chcesz wykonywać metody obiektów, musisz operować na kopii this (kopia pozostanie niezmienna, podczas gdy obiekt this jest zależny od kontekstu i "ulotny"). 

  var that = this
  setTimeout(function(){that.foo();},1000);

Wykorzystanie

Funkcje obsługujące zdarzenia mogą przy pomocy DOM zmieniać elementy strony (DHTML). Można w prosty sposób przypisać zdarzenie wszystkim elementom o danej klasie, wykorzystując funkcje z rozdziału o elementach dynamicznych. 

 function addEvent(node, eventName, func)
 {
   if(node.addEventListener)
     node.addEventListener(eventName, func, false);
   else
     node.attachEvent('on' + eventName, func);
 }

 var links = getElementsByClassName('opisany', document, 'a');
 for(i = 0; i < links.length; i++)
 {
   addEvent(links[i], 'mouseover', function()
   {
     document.getElementById('opis').firstChild.data = 'Link';
   });

   addEvent(links[i], 'mouseout', function()
   {
     document.getElementById('opis').firstChild.data = '';
   });
 }
 Każdy link z klasą opisany będzie zmieniał zawartość elementu o id opis po najechaniu na niego, a po zjechaniu z niego — wyczyszczał.
DOM | Obsługa formularzy
Zmodyfikowano: 21.11.2008, 14:44
submit