W poprzedniej lekcji tego kursu (Zdarzenia i ich obsługa) opisałem co to są zdarzenia i jak je można przechwycić i obsłużyć w JavaScript. Nie wymieniałem tak jednak wszystkich dostępnych zdarzeń aby nie wprowadzać zbytniego zamieszania – dokładnemu opisowi poszczególnych zdarzeń poświęcona jest ta lekcja.
Dostępne zdarzenia można podzielić na kilka grup: zdarzenia myszy, zdarzenia klawiatury, zdarzenia formularza, zdarzenia kontrolek formularza i zdarzenia dokumentu (strony). Każda z tych grup łączy w sobie zdarzenia generowane z jednego źródła (np. klawiatura czy mysz) lub generowane przez obiekty tego samego typu (kontrolki formularza). Dodatkowym uzasadnieniem takiego podziału są dodatkowe parametry zdarzeń (dodatkowe pola obiektu event) – są one różne w przypadku różnych grup (opiszę je poniżej przy okazji opisywania każdej z grup zdarzeń).
Zdarzenia myszy
Przeglądarka może wygenerować następujące zdarzenia związane z użyciem myszki na stronie WWW:
onclick– pojedyncze kliknięcie (naciśnięcie i zwolnienie klawisza myszki);ondblclick– podwójne kliknięcie;onmousedown– wciśnięcie klawisza myszki;onmouseup– zwolnienie klawisza myszki;onmouseover– kursor myszki znalazł się w obszarze obiektu;onmousemove– kursor myszki został przesunięty;onmouseout– kursor myszki opuścił obszar obiektu.
Najpopularniejszym z tych zdarzeń jest onclick, które m.in. wykorzystywałem już w przykładach powyżej. Pozostałe zdarzenia są wykorzystywane rzadziej, ale mogą też się przydać jeżeli planujesz na swojej stronie WWW zastosować bardziej zaawansowane efekty, np. interfejs typu „przeciągnij i upuść”.
Zdarzenia myszy posiadają następujące parametry dostępne poprzez obiekt event:
clientX,clientY– względne współrzędne kursora myszki (względem obiektu który dostarczył procedurę obsługi zdarzenia);screenXiscreenY– ekranowe (bezwzględne) współrzędne kursora myszki;button– numer klawisza myszki który był wciśnięty;altKey– czy klawisz Alt jest wciśnięty;ctrlKey– czy klawisz Control jest wciśnięty;shiftKey– czy klawisz Shift jest wciśnięty.
Wymienione powyżej zdarzenia myszy mogą być wygenerowane każdy wyświetlany element strony, dlatego też odpowiednie funkcje obsługi zdarzeń można dołączyć do większości znaczników HTML (głównie poza tymi umieszczonymi w sekcji <head>).
Zdarzenia klawiatury
Drugą grupą zdarzeń są zdarzenia związane z klawiaturą. Nie są one tak popularne jak zdarzenia myszy – w praktyce poza aplikacjami dostępnymi przez WWW (np. czytniki poczty czy edytory tekstu) nie są one w ogóle stosowane. Lista zdarzeń klawiatury jest krótka i zawiera tylko trzy pozycje:
onkeypress– klawisz alfanumeryczny został wciśnięty;onkeydown– klawisz został naciśnięty;onkeyup– klawisz został zwolniony.
Zdarzenia klawiatury posiadają parametry altKey, ctrlKey oraz shiftKey określające czy dany klawisz specjalny był wciśnięty czy nie (analogicznie jak przy zdarzeniach myszy). Jeżeli zaś chodzi o informację który klawisz został naciśnięty, to tutaj jest różnica pomiędzy przeglądarkami, które używają do tego celu różnych pól w obiekcie zdarzenia – keyCode, which oraz charCode. Ten problem można jednak obejść stosując poniższy kawałek kodu JavaScript, które do zmiennej klawisz przypisze kod klawisza:
var klawisz = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
Zdarzenia klawiatury, podobnie jak zdarzenia myszy, mogą dotyczyć każdego wyświetlanego na stronie elementu, dlatego też podobnie jak w przypadku zdarzeń myszy odpowiednie procedury obsługi tych zdarzeń można dołączyć do większości znaczników HTML na stronie.
Zdarzenia formularza
Każdy formularz na stronie może wygenerować następujące dwa zdarzenia:
onsubmit– formularz będzie wysłany.onreset– zawartość formularza jest czyszczona.
Pierwsze z tych zdarzeń (onsubmit) jest generowane w momencie gdy użytkownik wysyła formularz, czyli po naciśnięciu przycisku submit formularza lub naciśnięciu klawisza Enter na klawiaturze. Zdarzenie to jest zazwyczaj wykorzystywane do sprawdzenia czy formularz jest poprawnie wypełniony. Jeżeli nie jest, skrypt może wyświetlić odpowiedni komunikat i zablokować wysłanie formularza:
<form action="index.php" method="post" onsubmit="return sprawdzFormularz(this)"> <!-- zawartość formularza --> </form>
function sprawdzFormularz(formularz) { if (!formularz_jest_wypelniony(formularz)) { alert('Formularz nie jest wypełniony!'); return false; } return true; }
Dodatkowe informacje na temat korzystania z formularzy w skryptach JavaScript znajdziesz w jednej z kolejnych lekcji.
Drugim zdarzeniem formularza jest onreset – jest ono generowane w momencie czyszczenia zawartości formularza, czyli po naciśnięciu przycisku reset formularza lub klawisza Escape na klawiaturze. Ponieważ w praktyce klawisz reset jest rzadko używany (wiele osób, w tym ja, odradza nawet jego stosowanie), więc to zdarzenie jest praktycznie nieużywane.
Zdarzenia kontrolek formularza
Zdarzenia mogą być także generowane przez kontrolki formularza. Oprócz wymienionych wcześniej zdarzeń myszy i klawiatury, kontrolki formularza mogą dodatkowo wygenerować następujące zdarzenia:
onfocus– kontrolka otrzymała fokus (dane z klawiatury będą trafiać właśnie do niej);onblur– kontrolk straciła fokus;onselect– kontrolka została wybrana (wybranie kontrolki nie zawsze wiąże się z przekazaniem jej fokusu);onchange– zawartość kontrolki się zmieniła.
W praktyce zdarzenie onfocus można wykorzystać np. do podświetlenia za pomocą JavaScript pola do którego właśnie można wprowadzać dane, a zdarzenie onblur do usunięcia tego podświetlenia. To drugie zdarzenie można także wykorzystać do sprawdzenia czy dane wprowadzone do pola są poprawne – w przypadku błędnych danych skrypt może wyświetlić odpowiedni komunikat i ponownie przenieść fokus do pola, tak aby zablokować przejście do kolejnego pola formularza.
<input type="text" name="pole" onblur="sprawdzPole(this)">
function sprawdzPole(pole) { if (!pole_jest_poprawne(pole)) { alert('Pole jest źle wypełnione!'); pole.focus(); } return true; }
W trakcie testów okazało się że powyższy przykład nie działa jednak poprawnie w Firefox’ie 3 – komunikat się pojawiał, ale fokus nie wracał do sprawdzanego pola (wygląda to na jakiś błąd w tej przeglądarce). IE7 i Opera 9.5 zachowywały się poprawnie.
Spośród pozostałych zdarzeń kontrolek formularza przydatne może być też onchange – zdarzenie to jest generowane za każdym razem gdy zawartość pola formularza się zmieni. Można to wykorzystać do automatycznej aktualizacji innej części strony w trakcie wprowadzania danych przez użytkownika, lub też np. do wyświetlania podpowiedzi dla pola tekstowego.
Zdarzenia dokumentu
Ostatnią ale wcale nie najmniej ważną grupą zdarzeń są zdarzenia strony:
onload– strona została załadowana;onunload– strona jest zamykana;
Pierwsze z tych zdarzeń można wykorzystać do wykonania akcji w momencie gdy strona skończy się ładować, np. dokonać inicjalizacji menu. Drugie zdarzenie (onunload) ma znacznie mniejsze praktyczne znaczenie – w praktyce najczęściej było wykorzystywane do wyświetlania denerwujących reklamowych popupów w momencie zamykania strony.
Komentarze