Obsługa zdarzeń, to prawdopodobnie obok selektorów jedna z najważniejszych funkcjonalności frameworka jQuery i to właśnie ona stanowi o jego sile. Obie funkcjonalności zresztą zazebiają się właśnie w obsłudze zdarzeń, ponieważ zdarzenia definiowane są dla elementów, które wcześniej pobraliśmy za pomocą mniej lub bardziej złożonych selektorów.

Co daje nam zatem obsługa zdarzeń w jQuery? Przede wszystkim:

• Porządek w kodzie HTML (zdarzenia podpinamy w kodzie jQuery, więc wszelakie metody typu onClick, onChange w kodzie HTML stają się zbędne)
• Łatwość wywoływania zdarzeń zwrotnych czyli. np. dla zdarzenia onMouseOver bardzo prosty możemy przypisać zdarzenie onMouseOut
• Możliwość wiązania dynamicznego, dla elementów których jeszcze na stronie nie ma
• Elastyczność, elastyczność i jeszcze raz elastyczność

W dalszej części wpisu postaram się opisać szerzej poszczególne punkty.

Wykorzystanie metody bind do klasycznej obsługi zdarzeń

Najprostszym i zarazem podstawowym sposobem obsługi zdarzeń, jest wykorzystanie metody bind. Bind w tym przypadku, należy tłumaczyć jako wiązanie (potocznie, często w Polsce można usłyszeć zwrot bindowanie), ponieważ tworzymy więź pomiędzy obiektem DOM, a zdarzeniem. Sygnatura metody bind, wygląda następująco:

$("selector").bind("event_type", "event_handle_function");

Co w teorii przekłada się na:

• Selector - po prostu selektor, czyli np. znacznik a
• Event_type - typ zdarzenia, czyli np. onClick, onMouseOver, onMouseOut - tu należy zwrócić uwagę, że w jQuery zdarzenia pozbawione są przedrostków on i stosuje się tu konwencję małych liter, czyli np. click, mouseover, mouseout itp.
• Event_handle_function - funkcja obsługująca zdarzenie

Skoro już wiemy, jakie elementy wykorzystywane są w metodzie bind, spójrzmy jak możemy ją wykorzystać w praktyce do obsługi zdarzenia kliknięcia:

$(":button").bind("click", function(oEvent){
    alert($(this).html());
});

Choć cały kod, zajmuje zaledwie trzy linie, to jest zarazem bardzo treściwy. Na początku pobieramy wszystkie przyciski na stronie (czyli elementy input o typie button). Jak widać, został w tym przypadku wykorzystany jeden z genialnych selektorów jQuery. Następnie stosujemy metodę bind, podpinamy zdarzenie kliknięcia, dla którego tworzymy wewnętrzną funkcję anonimową i przekazujemy jej obiekt zdarzenia. Dla każdego kliknięcia na przycisk, wywołujemy funkcję alert, która wyświetla tekst zawarty na przycisku.

Zamiast zdarzenia click, możemy oczywiście wywołać dowolne inne zdarzenie dostępne w jQuery, czyli np. blur, change itp. (patrz odnośniki do API).

Zdarzenia są na tyle popularne i powszechne, że programiści jQuery, postanowili utworzyć skróconą wersję powyższej konstrukcji. W wersji tej, znika metoda bind, a do tablicy obiektów pobranych selektorem, zdarzenia podpinane są bezpośrednio. Oczywiście docelowy efekt jest taki sam.

Spójrzmy zatem jeszcze raz na nasze zdarzenie kliknięcia, tym razem w wersji skróconej:

$(":button").click(function(oEvent){
    alert($(this).html());
});

Kod minimalnie krótszy, ale tak samo treściwy:)

Możliwe jest również podpinanie kilku zdarzeń naraz, które mają realizować te samą funkcję:

$(":button").bind("click mouseenter", function(oEvent){
    alert($(this).html());
});

API:

• Selektor :button
• Metoda bind
• Lista zdarzeń

Zdarzenia zwrotne

Niejednokrotnie zdarza się sytuacja, w której chcielibyśmy obsłużyć zdarzenie zwrotne. Sztandarowym przykładem jest tutaj podświetlanie wierszy wszelakich tabel i list. Podczas zdarzenia onMouseOver wiersz jest podświetlany, a w czasie zdarzenia onMouseOut podświetlenie jest usuwane. Najczęściej do realizacji podświetlenia wykorzystuje się specjalnie przygotowaną klasę CSS, która po najechaniu myszką jest dodawana do elementu, a po opuszczeniu obszaru jest usuwana.

W jQuery możemy to zrealizować za pomocą zdarzenia hover, które przyjmuje dwie funkcje:

$("td").hover(
    function () {
        $(this).addClass("highlight");
    },
    function () {
        $(this).removeClass("highlight");
    }
);

Pierwsza z funkcji dodaje klasę, a druga ją usuwa.

Zamiast dodawania klasy, moglibyśmy alternatywnie skorzystać z funkcji modyfikującej CSS.

API:

• Zdarzenie hover

Dynamiczne wiązanie za pomocą metody on

Wyobraźmy sobie następującą sytuację. Mamy na stronie x przycisków, do których podpięliśmy to samo zdarzenie kliknięcia po załadowaniu się strony. W trakcie użytkowania strony, kod jQuery generuje jednak kolejnych y przycisków. Niestety dla tych przycisków nasze zdarzenie już nie zadziała. Więc w teorii, moglibyśmy ponownie użyć metody bind by dodać zdarzenia dla wszystkich przycisków na nowo - co umówmy się, jest jednak trochę kiepskim rozwiązaniem. Na szczęście jest na to lekarstwo, a jest nim metoda on.

Metodę on, wywołujemy się identycznie jak metodę bind, czyli zamiast pisać:

<pre class="brush:javascript">$(":button").bind("click", function(oEvent){
    alert($(this).html());
});

Napiszemy:

$(":button").on("click", function(oEvent){
    alert($(this).html());
});

Co daje nam taka delikatna modyfikacja? Otóż wbrew pozorom daje nam bardzo wiele. Nasze przyciski x utworzone na początku otrzymają swoje zdarzenia, ale otrzymają je również przyciski y, a nawet przyciski z, ż, ź itd...

Metoda on, monitoruje zmiany w drzewie DOM i jeśli znajdzie nowe dopasowanie, to podpina zadeklarowane na początku zdarzenie, bez żadnej dodatkowej pracy z naszej strony (ale z pewnością wiąże się to z dodatkowym narzutem pamięci - ważne jednak, że działa:).

Metoda on

Usuwanie zdarzeń

Jeśli wybrane zdarzenie nie jest nam dłużej potrzebne i chcemy je usunąć, to możemy to łatwo zrealizować za pomocą metody unbind:

$("selector").unbind("event_type");

Typ zdarzenia jest opcjonalny. Jeśli go nie podamy, to dla danego elementu zostaną usunięte wszystkie przypisane zdarzenia. Przykłady:

$(":button").unbind("click");
$("td").unbind();

Pierwsze polecenie usuwa zdarzenie kliknięcia dla przycisku, natomiast drugie usuwa wszystkie zdarzenia skojarzone z komórkami tabeli.

W przypadku, gdy chodzi o zdarzenia podpięte przy pomocy metody on, musimy skorzystać z metody off.

API:

• Metoda unbind
• Metoda off

Aktualizacja

Usunąłem informacje na temat metody live, która od wersji 1.7 jQuery jest już niezalecana. Opisałem za to nową metody: on oraz off wprowadzone w jQuery 1.7.

Data ostatniej modyfikacji: 28.11.2011, 18:35.