Obsługa zdarzeń
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
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
imouseup
- 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ąc przycisk na jednym elemencie, a puścić dopiero gdy mysz będzie na innym.
-
mouseover
imouseout
-
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
iblur
). Dla ułatwienia obsługi warto jest nieco opóźnić ukrywanie. -
keypress
-
wciśnięcie klawisza (analogiczne do
click
). Obiektevent
będzie zawierał kod wciśniętego klawisza.
-
keydown
ikeyup
-
moment wciśnięcia i puszczenia klawisza (podobnie jak
mousedown
imouseup
).
Logiczne
-
focus
iblur
- 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
iunload
-
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łanieunload
(broniąc się przed złośliwymi skryptami), dlatego nie można na nim polegać. -
submit
- Wysłanie formularza
Obiekt event
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
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 funkcjisetTimeout
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 wsetInterval
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 idopis
po najechaniu na niego, a po zjechaniu z niego — wyczyszczał.
Zmodyfikowano: 21.05.2007, 21:14