Z JavaScriptem i DHTML-em nieodłącznie związane jest pojęcie zdarzeń. Z pewnością jest ono rozumiane intuicyjnie. Zdarzenie to przesunięcie kursora myszy, kliknięcie, wczytanie strony, opuszczenie strony itp. Każdy element strony ma przypisany zestaw obsługiwanych przez niego zdarzeń, a każdemu z nich można przypisywać własne procedury obsługi, napisane — jakżeby inaczej — w JavaScripcie.
W różnych przeglądarkach stosowane są różne modele obsługi zdarzeń. Zajmiemy się zatem modelem podstawowym, historycznie najstarszym, obsługiwanym podobnie przez wszystkie dostępne produkty. Oprócz modelu podstawowego istnieje jeszcze nowocześniejszy, ustandaryzowany model DOM (w kolejnych wersjach: level 1, level 2 i level 3), a także model specyficzny dla przeglądarek z rodziny Internet Explorer. Model podstawowy, na którym się skupimy, nazywany jest też czasem modelem DOM level 0.
Procedurę obsługi można przypisać do danego zdarzenia na dwa sposoby. Jeśli jest ona bardzo krótka, np. składa się tylko z jednej, dwóch instrukcji, i może być zapisana w jednej linii kodu, można ją przypisać bezpośrednio do znacznika obsługującego dane zdarzenie:
<znacznik zdarzenie="instrukcja;">
W przypadku dłuższych procedur obsługi zdarzeniu należy przypisać jedynie wywołanie funkcji JavaScript:
<znacznik zdarzenie="nazwa_funkcji();">
natomiast w kodzie strony (z reguły w sekcji head) umieścić samą funkcję. Całość miałaby zatem schematyczną postać:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>Moja strona WWW</title>
<script type="text/javascript">
function nazwa_funkcji()
{
//tutaj kod funkcji
}
</script>
</head>
<body>
<znacznik zdarzenie="nazwa_funkcji();">
</body>
</html>
Przykładowy znacznik obsługujący zdarzenie miałby postać:
<p onclick="pClicked();">
Należy zwrócić uwagę, że najczęściej stosuje się uproszczoną terminologię. W przedstawionym przypadku powiedzielibyśmy, że zdarzeniu onclick została przypisana procedura obsługi w postaci funkcji pClicked. Formalnie rzecz ujmując, jest nieco inaczej (zdarzenie to click, onclick to właściwość wskazująca procedurę obsługi bądź wręcz procedura obsługi), ale z reguły posługujemy się formami uproszczonymi. Tak też będzie w dalszej części kursu.
Lista typowych zdarzeń została przedstawiona w tabeli 5.1.
Tabela 5.1. Lista typowych zdarzeń
|
Nazwa zdarzenia |
Opis |
Elementy HTML obsługujące zdarzenie |
|
onabort |
Zdarzenie, które powstaje, kiedy zostanie przerwane ładowanie obrazu. |
img |
|
onblur |
Zdarzenie, które powstaje, kiedy element traci fokus. |
większość elementów strony |
|
onchange |
Zdarzenie, które powstaje, kiedy element traci fokus i jednocześnie zmienia się wartość zawarta w tym elemencie (np. polu tekstowym). |
input, select, textarea |
|
onclick |
Zdarzenie, które powstaje, kiedy element został kliknięty. |
większość elementów strony |
|
ondblclick |
Zdarzenie, które powstaje, kiedy element został dwukrotnie kliknięty. |
większość elementów strony |
|
onerror |
Zdarzenie, które powstaje, kiedy w trakcie ładowanie obrazu wystąpi błąd. |
img |
|
onfocus |
Zdarzenie, które powstaje, kiedy element otrzymuje fokus. |
większość elementów strony |
|
onkeydown |
Zdarzenie, które powstaje, kiedy naciśnięty zostanie klawisz klawiatury. |
większość elementów strony |
|
onkeypress |
Zdarzenie, które powstaje, kiedy klawisz klawiatury zostanie naciśnięty i puszczony. |
większość elementów strony |
|
onkeyup |
Zdarzenie, które powstaje, kiedy klawisz klawiatury zostanie puszczony. |
większość elementów strony |
|
onload |
Zdarzenie, które powstaje, kiedy przeglądarka zakończy ładowanie strony lub ramki. |
body, frameset |
|
onmousedown |
Zdarzenie, które powstaje, kiedy klawisz myszy zostanie naciśnięty nad elementem. |
większość elementów strony |
|
onmousemove |
Zdarzenie, które powstaje, kiedy kursor myszy jest przesuwany nad elementem. |
większość elementów strony |
|
onmouseout |
Zdarzenie, które powstaje, kiedy kursor myszy opuści obszar elementu. |
większość elementów strony |
|
onmouseover |
Zdarzenie, które powstaje, kiedy kursor myszy wejdzie w obszar elementu. |
większość elementów strony |
|
onmouseup |
Zdarzenie, które powstaje, kiedy klawisz myszy zostanie zwolniony nad elementem. |
większość elementów strony |
|
onreset |
Zdarzenie, które powstaje podczas resetowania (wywołanie w kodzie metody reset, kliknięcie przycisku reset) formularza. |
form |
|
onresize |
Zdarzenie, które powstaje, gdy zmieni się rozmiar okna. |
body, frameset |
|
onselect |
Zdarzenie, które powstaje podczas zaznaczania fragmentu tekstu. |
input (text, textarea) |
|
onsubmit |
Zdarzenie, które powstaje podczas wysyłania (wywołanie w kodzie metody submit, kliknięcie przycisku submit) formularza. |
form |
|
onunload |
Zdarzenie, które powstaje, kiedy przeglądarka usuwa bieżący dokument. |
body, frameset |
