Kurs jQuery #3 – Zdarzenia

O tym czym są zdarzenia już pewnie wiesz po lekturze mojego kursu poświęconego JavaScript. Gdybyś jednak go nie przeczytał i zaczynał dopiero od tego kursu przypomnę Ci jedynie, że zdarzenia są to czynności wykonywane przez użytkownika na stronie. Najechanie przez niego na coś myszką, zmienienie stanu jakiegoś elementu czy kliknięcie lub przesunięcie czegoś itd. jQuery nie oferuje w sumie żadnej super uproszczonej i innowacyjnej składni w tym temacie ale za to mamy pewność, że ich obsługa będzie prawidłowo funkcjonowała na wszystkich przeglądarkach.

Zdarzenia w jQuery można w sumie obsługiwać na dwa sposoby. Dzięki metodzie on(), gdzie jako pierwszy argument podajemy nazwę zdarzenia a jako drugi funkcję która ma zostać wykonana po zarejestrowaniu takiego zdarzenia ew. podajemy obiekt jako jedyny argument a w tym obiekcie nazwy zdarzeń i przypisane do nich funkcje, jeśli chcemy od razu przypisać klika zdarzeń.

Drugim sposobem ustawienia nasłuchu na jakieś zdarzenie dla jakiegoś elementu jest użycie metody odpowiedzialnej konkretnie za to zdarzenie. Z tym rozwiązaniem spotkałeś się już nie raz w poprzednich przykładach kiedy obsługiwaliśmy kliknięcie w jakiś element. Polega ono na stosowaniu metody odpowiedzialnej za nasłuch na to jedno, konkretne zdarzenie. Do tej pory była to jedynie metoda click(). Jest ich jednak całe mnóstwo. Ja omówię jednak tylko te najpopularniejsze i najczęściej stosowane które mogą Ci się przydać w codziennej pracy.

 Kliknięcie na element

Chyba najpopularniejszym zdarzeniem jest kliknięcie przez użytkownika na coś. Możemy chcieć wtedy wykonać jakąś operację która da mu do zrozumienia, że kliknięcie rzeczywiście coś spowodowało ew. możemy w ten sposób zastąpić domyślną akcję elementu. Ze zdarzeniem kliknięcia tak poza tym spotkałeś się już wcześniej w tym kursie.

Jeśli jest to potrzebne możesz obsługiwać również podwójne kliknięcie:

Wjechanie myszką

Równie często zauważysz na stronach jak ich elementy różnie się zachowują kiedy przejeżdżasz po nich myszką. Obsługę tego zdarzenia można rozdzielić nawet na dwa pomniejsze, składowe: zdarzenie wjechania na element i zdarzenie zjechania z niego. Obrazują to odpowiednio przykłady:

Zdarzenia klawiatury

Mogłoby się wydawać, że nie ma tu zbyt wiele bo w końcu nasza interakcja klawiaturą ze stroną opiera się na wpisywaniu na niej tekstu ale tak naprawdę do wciśnięcia klawisza mamy trzy osobne zdarzenia. No może nie do samego wciśnięcia ale to zaraz Ci wyjaśnię. keypress() jest odpowiedzialny za obsługę zdarzenia wciśnięcia klawisza. Podobnie jak keydown() z tą różnicą, że kiedy trzymamy wciśnięty klawisz to keydown() wywoływany jest tylko raz natomiast keypress() wywołuje cały czas pojedyncze zdarzenia. Ponadto klawisze funkcyjne takie jak Shift nie wywołują zdarzenia keypress() a tylko keydown()keyup() natomiast jest zwyczajnie wywoływany w momencie puszczenia przez nas klawisza na klawiaturze. Możesz to wszystko przetestować i samemu zaobserwować kiedy wywoływane jest poszczególne zdarzenie.

Zdarzenia w formularzu

Pierwszym zdarzeniem jakie Ci pokażę będzie change(). Jest ono wywoływane jak sama nazwa wskazuje po dokonaniu jakiejś zmiany w elemencie formularza. Popatrz jak działa na poniższym przykładzie.

Mamy tutaj jeden zwykły tekstowy input oraz select. Możesz zauważyć, że jeśli zmieniasz coś w inpucie to zdarzenie nie zostanie wywołana dopóki nie skończysz jego edycji i nie przerzucisz się na inny element. Ponadto rzeczywiście musisz dokonać jakiejś zmiany w tym inpucie żeby wywołać to zdarzenie. W przypadku selecta sprawa wygląda tak, że zdarzenie wywoływane jest przy zmianie obecnie wybranej opcji.

Kolejnym zdarzeniem na które warto zwrócić uwagę jest focus().

Zdarzenie wywoływane jest od razu po zaznaczeniu danego elementu czy to przez kliknięcie na niego myszką czy przejście w niego TABem. Powiązanym z focus() jest zdarzenie blur() które wywoływane jest wtedy kiedy dany element nie jest już zaznaczony a więc traci focus.

Ostatnim zdarzeniem z formularzy które Ci pokaże będzie submit(). Jak pewnie już się domyślasz jest ono wywoływane kiedy formularz zostaje wysyłany. Daje nam to ciekawe możliwości chociażby w postaci faktu, że możemy nie dopuścić do wysłania formularza i odpowiednio obrobić dane w niego wpisane, lub wysłać je poprzez AJAX a później przetworzyć dane zwrotne. Pewnie będzie to wygodne i ciekawe rozwiązanie dla potencjalnego użytkownika.

Jak widać formularz nie zostaje w tym przypadku wysłany a my dalej pozostajemy na tej stronie co daje nam możliwość dalszej pracy bez konieczności przeładowania strony.

Zdarzenia okna

Kolejna kategoria często wykorzystywanych zdarzeń to zdarzenia okna a więc te które dotyczą bezpośrednio strony w ogóle i okna przeglądarki na której jest obecnie otwarta.

Pierwszym zdarzeniem jest ready()  o którym już wiesz. Zostanie odpalone kiedy cały dokument, nasza strona, jest gotowa do użytku i wszystko zostało już poprawnie załadowane. Jest ona tak często wykorzystywana, że zespół zajmujący się tworzeniem i rozwojem jQuery stworzył jej specjalny, skrócony odpowiednik który również znajdziesz pod spodem.

Często stosowane jest również zdarzenie unload(). Odpala się kiedy użytkownik chce wyjść z obecnej podstrony. Często jest używane kiedy strona chce wyświetlać te irytujące powiadomienia “Czy na pewno chcesz opuścić naszą stronę?” a przy okazji wyświetli Ci jeszcze jedną reklamę na pożegnanie. Naprawdę nie polecam stosowanie tego na twoich stronach – wszystkich to irytuje. Można również zastosować je w lepszy sposób. Na przykład jeśli ktoś edytował jakiś tekst na stronie i nie zapisał efektów swojej pracy a Ty o tym wiesz, możesz mu o tym przypomnieć. Można również zbierać chociażby statystyki o tym jak długo użytkownik przebywa na poszczególnych podstronach.