Obsługa zdarzeń

Tworzone w języku JavaScript skrypty mogą służyć do obsługi zdarzeń (ang. event handler). Są to tak zwane procedury zdarzeniowe. Skrypty takie definiują zachowanie się przeglądarki w przypadku wystąpienia określonego zdarzenia. Większość zdarzeń wywoływana jest przez działania użytkownika (np. kliknięcie przyciskiem myszy). Gdy wystąpi takie zdarzenie, przeglądarka przechodzi do wykonania skryptu związanego z zaistniałym zdarzeniem. Występują również zdarzenia, które nie są inicjowane przez użytkownika (np. zakończenie wczytywania strony).

Przykłady zdarzeń to:

• kliknięcie przez użytkownika myszą
• przesunięcie myszy nad element
• wczytanie strony internetowej
• wczytanie obrazu
• zmiana zawartości pola wprowadzania
• naciśnięcie klawisza

Każdy skrypt opisujący zdarzenie skojarzony jest z określonym obiektem strony internetowej. W kodzie HTML w znaczniku opisującym obiekt musi znaleźć się specyfikacja tego skryptu.

Np. zdarzenie onMouseOver zachodzi wówczas, gdy wskaźnik myszy pojawi się nad obiektem (np. przyciskiem). Zdarzenie to może w kodzie HTML zostać opisane w następujący sposób:

Obsługa zdarzenia została opisana jako wartość atrybutu (highlight), a sam atrybut otrzymał nazwę, która jest nazwą zdarzenia (onMouseOver). W tym wypadku obsługa zdarzenia została zaprojektowana w postaci funkcji, czyli wystarczy wywołać funkcję, aby zdarzenie zostało obsłużone.

Nazwy zdarzeń w języku JavaScript zwykle zaczynają się od słowa on. Kliknięcie będzie mieć nazwę onClick, najechanie myszą onMouseOver itp.

Aby obsłużyć zdarzenie, nie zawsze trzeba tworzyć funkcję. Jeżeli kod, który ma zostać wywołany, jest pojedynczą instrukcją, można wpisać skrypt bezpośrednio w znaczniku.

Po kliknięciu przycisku wyświetli się okno z komunikatem Witaj !  .

Ogólna postać przypisania zdarzenia:

element1.zdarzenie = funkcja

Przykład

Zdarzenia myszy

Mysz jest podstawowym narzędziem wykorzystywanym do poruszania się po stronach internetowych, dlatego obsługa zdarzeń związanych z myszą jest jedną z najczęściej stosowanych funkcji.

Do zdarzeń wywołanych działaniem myszy należą:

• onClick — występuje po kliknięciu myszą
• onDblClick — występuje po dwukrotnym kliknięciu myszą
• onMouseDown — występuje, gdy przycisk myszy został wciśnięty
• onMouseUp — występuje, gdy przycisk myszy został zwolniony
• onMouseOver — występuje, gdy kursor myszy został umieszczony na elemencie
• onMouseMove — występuje, gdy kursor myszy został przesunięty wewnątrz elementu
• onMouseOut — występuje, gdy kursor myszy został przesunięty poza element

Przykład



W przykładzie zostały wykorzystane zdarzenia myszy onMouseOver, onMouseOut i onMouseDown. W efekcie po ustawieniu myszy na pierwszym rysunku ulegnie on zmianie. Wciśnięcie przycisku myszy spowoduje kolejną zmianę rysunku, a przesunięcie myszy poza rysunek przywróci ponowne pokazanie pierwszego rysunku. Kliknięcie rysunku spowoduje przeniesienie do strony helion.pl

Przykład



W przykładzie zostały wykorzystane zdarzenia myszy onMouseDown i onMouseUp. W celu odwołania się do elementu id="ikona" została wykorzystana metoda getElementById(). Po wciśnięciu przycisku myszy nastąpi zmiana grafiki. Po jego zwolnieniu nastąpi powrót do poprzedniej grafiki.

Zdarzenia klawiatury

Zdarzenia związane z klawiaturą są rzadko stosowane. Wykorzystują je tylko aplikacje typu edytor tekstu lub czytnik poczty. Są to trzy zdarzenia:

• onKeyPress — klawisz został naciśnięty i zwolniony
• onKeyDown — klawisz został wciśnięty, ale nie został zwolniony
• onKeyUp — klawisz został zwolniony

Zdarzenia formularza

Z formularzem związane są dwa zdarzenia:

• onSubmit — zdarzenie jest generowane, gdy użytkownik wysyła formularz (po kliknięciu przycisku Submit). Zdarzenie to może zostać wykorzystane do sprawdzenia, czy formularz został poprawnie wypełniony.
• onReset — zdarzenie jest generowane, gdy formularz jest czyszczony z zawartości (po kliknięciu przycisku Reset).

Zdarzenia elementów formularza

Oprócz zdarzeń generowanych przez formularz mogą wystąpić zdarzenia generowane przez elementy formularza. Są to:

• onFocus — element formularza otrzymał zaznaczenie, czyli wpisywane dane będą trafiały do tego elementu
• onBlur — element stracił zaznaczenie
• onSelect — element został wybrany (wybrany element nie zawsze otrzymuje zaznaczenie)
• onChange — zawartość elementu formularza uległa zmianie

Zdarzenia dokumentu

Do zdarzeń związanych z dokumentem należą:

• onLoad — strona została załadowana
• onUnload — strona jest zamykana

Zadania

1. Utwórz plik HTML zawierający obrazek a następnie napisz skrypt który:

• zmienia obrazek po najechaniu na niego kursorem myszki
• zmienia obrazek po najechaniu na niego kursorem myszki, a po opuszczeniu z jego obszaru przywraca poprzedni obraz
• zmienia obrazek po jego kliknięciu kursorem myszki
• zmienia obrazek po jego dwukrotnym kliknięciu kursorem myszki.

2. Napisz skrypt reagujący na wciśnięcie klawiszy klawiatury i wyświetlający

• znak odpowiadający wciśniętemu klawiszowi
• kod znaku odpowiadający wciśniętemu klawiszowi

3. Napisz skrypt wyświetlający komunikat informujący o załadowaniu strony.

4. Napisz skrypt wyświetlający komunikat informujący o załadowaniu obrazka.

5. Utwórz formularz wysyłający zapytanie na twoją skrzynę poczty elekronicznej. Formularz powinien zawierać pola: Nazwisko, Imię, Treść wiadomości oraz przycisk Wyślij