Zdarzenia w JavaScript jest to ogólny mechanizm pozwalający na uruchomienie dowolnego fragmentu skryptu JavaScript w momencie gdy wystąpi określone zdarzenie, np. przycisk zostanie kliknięty.
Zdarzenia które są dostępne dla skryptów JavaScript zazwyczaj są atrybutami znaczników, o nazwach rozpoczynających się od „on„, np. zdarzenie kliknięcia myszką nazywa się onclick.
Standard HTML 4.01/XHTML 1.0 opisuje 18 różnych zdarzeń. Standard DOM dokłada do tego jeszcze kilka kolejnych. To jest jednak nie koniec – przeglądarki mogą obsługiwać jeszcze więcej różnych zdarzeń, np. wg MSDN przeglądarka IE obsługuje około 80 różnych zdarzeń. Tutaj jednak skoncentruję się tylko na opisaniu tych zdarzeń które są opisane w standardzie HTML.
Podstawy obsługi zdarzeń
Aby obsłużyć dowolne zdarzenie, należy przypisać mu funkcję obsługi zdarzenia. „Funkcja” tutaj to jest określenie nieco na wyrost, gdyż kod który można użyć do obsłużenia zdarzenia można porównać do ciała funkcji bezparametrowej, która dodatkowo jest metodą klasy. Krótko mówiąc, przypisuje się fragment kodu JavaScript, w którym oprócz instrukcji można dodatkowo użyć słów kluczowych return i this (ich zastosowanie opiszę poniżej).
Najłatwiejszą metodą przypisania kodu JS do zdarzenia jest umieszczenie go jako wartości odpowiedniego atrybutu. Poniższy przykład pokazuje jak można wyświetlić komunikat po kliknięciu przycisku:
<button onclick="alert('Hello!')">Kliknij mnie!</button>
Warto wiedzieć że obsługując zdarzenie onclick można skorzystać ze słowa kluczowego this, które tutaj będzie zawierać odwołanie do elementu który został kliknięty. Dzięki temu można uprościć znacznie funkcje obsługi zdarzeń, gdyż można się bezpośrednio odwołać do klikniętego elementu bez konieczności jego odszukiwania z poziomu skryptu. Poniższy przykład pokazuje jak można zliczyć ile razy został kliknięty przycisk:
<button onclick="this.innerHTML = parseInt(this.innerHTML) + 1">0</button>
Warto też wiedzieć, że zdarzenia mogą mieć dodatkowe parametry. Dostęp do obiektu przechowującego te wszystkie parametry jest jednak zależny od przeglądarki. Większość współczesnych przeglądarek pozwala stosuje w tym celu zmienną event, do której można się odwołać w procedurze obsługi zdarzenia. Niestety sposób ten nie zadziała w starszych wersjach Internet Explorera, który wymaga aby odwoływać się inaczej: window.event. Dlatego też pisząc własną procedurę obsługi zdarzeń w której chcesz się odwołać do danych zdarzenia, na początku dodaj taki fragment:
if (!event) event = window.event; // dalsza część skryptu
W przypadku gdy potrzebujesz wykonać pojedyncze odwołanie, możesz też wykorzystać właściwości operatora || który zawsze zwraca jedną z przekazanych wartości i napisać coś takiego:
x = (event || window.event).clientX
Dla różnych grup zdarzeń dostępne są różne pola dodatkowe. Dokładny opis tych pól, jak również każdego ze zdarzeń osobno, znajdziesz w kolejnej lekcji tego kursu – Lista zdarzeń JavaScript.
Funkcje obsługi zdarzeń mogą też zwracać wartość logiczną true lub false. Jeżeli funkcja zwróci false, to dalsze przetwarzanie zdarzenia jest anulowane. W ten sposób można np. zablokować wysłanie formularza w momencie gdy zawiera on niepoprawne dane.
Kod JavaScript w linkach – javascript:
Linki na stronie można wykorzystać nie tylko do przechodzenia do innych stron, ale także do inicjowania określonych akcji na tej samej stronie. Jedną z metod którą można do tego użyć przedstawiłem już powyżej – jest to zdarzenie onclick. Drugą metodą jest natomiast wstawienie kodu JavaScript bezpośrednio do atrybutu href znacznika <a>, poprzedziwszy go wcześniej przedrostkiem javascript:. Poniższy przykład pokazuje dwa równoważne przykłady jak wyświetlić okienko z komunikatem po kliknięciu na link:
<a href="#" onclick="alert('Witaj!'); return false">Kliknij tutaj</a> <br> <a href="javascript:alert('Witaj!')">Kliknij tutaj</a>
Dodatkowa instrukcja return false w pierwszej linii jest potrzebna aby zapobiec przeładowaniu się strony po kliknięciu.
Odmierzanie czasu i zdarzenia
Poza wymienionymi powyżej zdarzeniami istnieje także możliwość uruchamiania określonych fragmentów kodu JavaScript po upływie określonego czasu. Aby skorzystać z tej możliwości, należy użyć funkcji setTimeout(). Funkcja ta przyjmuje dwa parametry – pierwszym jest kod JavaScript do uruchomienia po upływie określonego czasu, a drugim czas w milisekundach. Ten mechanizm można wykorzystać np. do wyświetlenia okienka z komunikatem po sekundzie od kliknięcia:
<button onclick="setTimeout('alert(\'Witaj!\')', 1000)">Kliknij tutaj</button>
Funkcja setTimeout() pozwala na pojedyncze uruchomienie kodu JavaScript po upływie określonego czasu. Jeżeli potrzebujesz uruchamiać pewien kod JavaScript cykliczne (np. chcesz wstawić zegarek na stronę), musisz ponownie wywołać tą funkcję w momencie gdy uruchomiony zostanie podany kod JavaScript. Alternatywnie możesz też skorzystać z funkcji setInterval(). Funkcja ta posiada identyczne parametry jak setTimeout, ale w odróżnieniu od niej podany kod JavaScript będzie uruchamiany za każdym razem gdy podany odcinek czasu upłynie.
Zdarzenia obiektów
Omówiony tutaj mechanizm zdarzeń można też użyć jeżeli korzystasz z niektórych obiektów, np. obiektu XMLHttpRequest. Przy pomocy tego obiektu można wysłać żądanie do serwera i oczekiwać na odpowiedź. Oczekiwanie na odpowiedź można zrobić na dwa sposoby: albo wywołać funkcję która zakończy swe działanie dopiero gdy dostanie odpowiedź od serwera, albo też można zamiast tego zarejestrować funkcję, która zostanie automatycznie wywołana gdy ta odpowiedź nadejdzie. Pierwsze rozwiązanie ma tą wadę że w trakcie oczekiwania na odpowiedź od serwera przeglądarka nie będzie reagować na polecenia użytkownika, dlatego też zdecydowanie lepszym rozwiązaniem jest wysłać żądanie do serwera podając funkcję która ma zostać wywołana w momencie gdy odpowiedź nadejdzie – w ten sposób przeglądarka nie będzie blokowana na czas oczekiwana na odpowiedź od serwera.
Komentarze