Obsługa zdarzeń

Wszystkie nasze dotychczasowe działania ograniczały się do wywoływania poleceń i funkcji bezpośrednio przed rozpoczęciem ładowania głównej części dokumentu lub w czasie jej ładowania. Następnym ważnym krokiem w tworzeniu dynamicznych stron WWW jest obsługa zdarzeń. Obsługa zdarzeń polega na przypisaniu funkcji, instrukcji (lub kilku instrukcji) konkretnemu zdarzeniu na konkretnym elemencie dokumentu.

Zdarzenia związane z ładowaniem strony

Pierwszym zdarzeniem jakie poznamy będzie zdarzenie onLoad. Zdarzenie to następuje bezpośrednio po załadowaniu się dokumentu. Przypisanie odpowiedniej funkcji temu zdarzeniu należy definiować w znaczniku <body>.

Innym zdarzeniem, które można zdefiniować w znaczniku <body> jest onUnload. Następuje ono w momencie opuszczania strony.

Zdarzenia związane z myszką

onClick - zdarzenie następuje podczas kliknięcia na danym elemencie strony
onMouseOver - najechanie kursorem na element
onMouseOut - zjechanie kursora z elementu
onMouseMove - poruszanie kursorem nad elementem
onMouseDown - wciśnięcie przycisku myszy nad elementem
onMouseUp - zwolnienie przycisku myszy nad elementem

W przeglądarce Netscape 4.x zdarzenie onClick obsługiwanie jest między innymi na odnośniku (czyli znaczniku <A>), na znaczniku <body>, <layer>, <ilayer> jak również na pewnych elementach formularza takich jak: button, checkbox, radio, reset, submit.

Przeglądarki Internet Explorer 4.x 5.x 6.x oraz Netscape 6+/Mozilla wszystkie zdarzenia związane z myszką obsługują na wszystkich elementach strony.

Istnieje również pewien "ekwiwalent" zdarzenia onClick na znaczniku <A>

<A HREF="javascript:NazwaFukcji()">odnośnik</A>

Jeżeli chcemy obsłużyć zdarzenie na elemencie graficznym (znacznik <IMG>) w przeglądarce Netscape 4.x to musimy zastosować pewien wybieg:

Obrazek jest zamknięty w znaczniku <A>, a więc jest odnośnikiem. Ale jednocześnie nie zachowuje się jak odnośnik, ponieważ instrukcja void(0) znaczy tyle co "nic nie rób".

Inne zdarzenia

onKeyPress - naciśnięcie klawisza
onKeyDown - klawisz w dół
onKeyUp - klawisz w górę

Zdarzenia związane z klawiaturą.

onFocus - gdy na elemencie pojawia się zaznaczenie (focus)
onBlur - gdy element traci zaznaczenie

Powyższe zdarzenia obsługują elementy, na których może nastąpić tak zwany fokus, czyli zaznaczenie pojawiające się podczas naciskania klawisza "Tab". Są to takie elementy jak: odnośnik, text, textarea, select, password, button.

onSubmit - następuje przy wysłaniu formularza
onReset - następuje przy resetowaniu formularza

Są to zdarzenia obsługiwane przez znacznik <FORM>.

onSelect - zaznaczenie tekstu w polu tekstowym
onChange - tekst ulega zmianie w polu tekstowym

Zdarzenia związane z elementami formularza: text, textarea, password.

Dostęp do formularzy

JavaScript umożliwia dostęp do poszczególnych pól formularza co umożliwia zarówno odczyt danych, jak też manipulacje zawartością tych pól.
Dostęp do pola formularza można zrealizować w następujący sposób:

document.forms["nazwa_formularza"].nazwa_pola;
lub
document.nazwa_formularza.nazwa_pola;

Powyższy sposób dostępu do formularza i jego pól jest możliwy, o ile formularz i jego pola mają swoje nazwy (atrybut NAME)
Na przykład:

Aby teraz wczytać zawartość pola tekstowego pole_1 do zmiennej zmienna, należy sformuować następującą instrukcję:

zmienna = document.formularz.pole_1.value;

Mając dostęp do zawartości pól formularzy, można sprawdzać prawidłowość ich wypełnienia. Zobacz przykład.

Dostęp do grafiki

Podobnie jak w przypadku formularzy, JavaScript umożliwia również dostęp do rysunków umieszczonych w dokumencie HTML. Dostęp do grafiki można zrealizować w następujący sposób:

document.images["nazwa_rysunku"];
lub
document.images.nazwa_rysunku;

Mając dostęp do rysunku, można sobie pozwolić na dynamiczną zmianę kilku jego właściwości. Najczęściej wykorzystywane są tu:

src - źródło pliku graficznego (ścieżka dostępu)
width - szerokość obrazka
height - wysokość obrazka

Szerokość i wysokość obrazka można dynamicznie zmieniać w przeglądarkach Internet Explorer 4.x 5.x 6.x i Netscape 6+/Mozilla
W przeglądarce Netscape 4.x, właściwości width i height są tylko do odczytu.

Przykład tzw. efektu rollover:
w sekcji <head> wstawiamy funkcję:

<script type="text/javascript">
 function Rysunek(stan){
  if(stan=="over"){
   document.images.logo.src="img/baner2.gif"
   document.images.logo.width=350
   document.images.logo.height=50
  }
  if(stan=="out"){
   document.images.logo.src="img/baner1.gif"
   document.images.logo.width=235
   document.images.logo.height=30
  }
 }
</script>

natomiast w sekcji <body> dokumentu piszemy:

<a href="javascript:void(0)"
 onMouseOver="Rysunek('over')"
 onMouseOut="Rysunek('out')">
 
 <img name="logo"
   src="grafika1/baner1.gif"
   width="235" height="30" border="0">

</a>

W powyższym przykładzie, funkcja Rysunek() podmienia rysunek w zależności od wartości argumentu stan. Funkcja zmienia nie tylko źródło grafiki, lecz również szerokość i wysokość tej grafiki (IE, NN6). Wywołanie funkcji następuje poprzez obsługę zdarzeń onMouseOver i onMouseOut. W zależności od zdarzenia, funkcję Rysunek() wywołujemy z parametrem "over" lub "out", co powoduje wybranie właściwego rysunku.
Aby zobaczyć efekt działania skryptu, wjedź kursorem myszy na poniższy rysunek.

Przykład jest nieco uproszczony, gdyż należałoby jeszcze zastosować tzw. preloading (szczegóły w rozdziale Obiekt Image).