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ą dwóch sposobów: 

 //starsza metoda
 element.onzdarzenie = funkcja; //nazwa funkcji bez (), ponieważ do zdarzenia przypisujemy funkcję, a nie jej wynik!
 //nowsza metoda
 element.addEventListener("zdarzenie",nazwa funkcji bez (),false);

Spójrz też na kod: 

 Node.prototype.addEvent = function(zdarzenie, funkcja) {
 if (this.addEventListener) this.addEventListener(zdarzenie.toLowerCase(), funkcja, false)
 else if (this.attachEvent) this.attachEvent("on"+zdarzenie.toLowerCase(), funkcja)
 else eval("this.on"+zdarzenie.toLowerCase()+" = "+funkcja)
 }

Zdarzenia

Możesz zobaczyć szczegółowe informacje o danym zdarzeniu. patrz: Obiekt event.

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. Lista właśćiwośći:

altKey
dla zdarzeń myszy i klawiatury, ma wartość false jeśli klawisz [ALT] nie jest wciśnięty, true jeżeli jest.
ctrlKey
dla zdarzeń myszy i klawiatury, ma wartość false jeśli klawisz [CTRL] nie jest wciśnięty, true jeżeli jest.
shiftKey
dla zdarzeń myszy i klawiatury, ma wartość false jeśli klawisz [SHIFT] nie jest wciśnięty, true jeżeli jest.
keyCode
niektóre przeglądarki umieszczają tutaj dla zdarzeń klawiatury kod klawisza.
which
niektóre przeglądarki umieszczają tutaj dla zdarzeń klawiatury kod klawisza.
charCode
niektóre przeglądarki umieszczają tutaj dla zdarzeń klawiatury kod klawisza.

Zalecam umieszczenie na początku zdarzenia klawiatury następującego kawałka kodu, który do zmiennej klawisz przypisze znak klawisza:

var klawisz = event.keyCode ? String.fromCharCode(event.keyCode) : event.which ? String.fromCharCode(event.which) : String.fromCharCode(event.charCode)

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 ciąg lub funkcję do wykonania, a jako drugi parametr ilość milisekund do odczekania. 

 setTimeout(
 'alert("Coś tam")',5000
 )
 //lub
 setTimeout(
 function() {alert("Coś tam"},5000
 )
DOM | Obsługa formularzy
Zmodyfikowano: 02.08.2011, 16:12
submit