• Artykuł

          

Samouczek jQuery - Wprowadzenie do obsługi zdarzeń  Udostępnij na: Facebook

Autor: Aurelia Tokarek

Opublikowano: 2012-02-22

Jedną z najważniejszych możliwości, jakie daje nam JavaScript jest interakcja z użytkownikiem. Interakcja ta polega nie tylko na możliwości wypisania bądź odczytania tekstu, ale może być postrzegana szerzej. W aplikacjach internetowych chcemy obsługiwać zdarzenia tj. kliknięcie, podwójne kliknięcie, czy najechanie kursorem myszki na dany element.

Przed wykonaniem zadań powinieneś wiedzieć:

Po wykonaniu zadań nauczysz się:

  • obsługiwać zdarzenia: kliknięcia, dwukliku i najechanie kursorem myszki na dany element,
  • usuwać zdarzenia.

Implementacja

W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip. Jeśli nie możesz pobrać pliku, to zobacz Jak przygotować stronę samouczka. W elemencie head umieść następujący kod:

<script type="text/javascript"  src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>

Naszym zadaniem będzie obsługa podstawowych zdarzeń elementów znajdujących się na stronie.

Rys.  1. Alert po kliknięciu w nagłówek.

Podpinanie zdarzeń - bind

Metoda bind() jest głównym sposobem dołączania funkcji obsługujących zdarzenia na stronie. Chociaż można pominąć stosowanie tej metody i zastosować skróty, warto wiedzieć, jak wygląda pełny kod do tego typu zadań.

W najprostszej i najczęściej wykorzystywanej formie metoda bind() ma następującą składnię:

.bind( typZdarzenia, funkObslugi(obiektyZdarzenia))

Gdzie:

  • typZdarzenia, to ciąg znaków, zawierający jedno lub więcej zdarzeń DOM, np. "click" lub  "hover",
  • funkObslugi – funkcja wywoływania każdorazowo przy zdarzeniu,
  • obiektyZdarzenia – obiekty, które przechowują dodatkowe informacje, np. koordynaty X i Y aktualnej pozycji kursora.

W tym zadaniu wyświetlimy okno dialogowe, klikając na element H1 na stronie (napis „Samouczek jQuery”).

  1. W przeglądarce Internet Explorer 9 otwórz stronę internetową jTest.html, znajdującą się w pliku JavaScript.zip.
  2. Wciśnij klawiszF12 lub wybierz Narzędzia>F12 Narzędzia deweloperskie.
  3. Kliknij w oknie na zakładkę Script (oznaczoną 1 na Rys.2.), a w wierszu, w prawym dolnym rogu (oznaczonym 2 na Rys. 2.), wpisz:
$("h1").bind("click",function(event){alert("klikniesz jeszcze raz? :)");})

Rys. 2. Narzędzia programistyczne do jQuery w Internet Explorer 9.

  1. Wciśnij Enter.
  2. Kliknij na nagłówek (Samouczek jQuery) znajdujący się na stronie.
Informacja

Przypinając zdarzenia do stron wykorzystujące metodę click()nie jest konieczne wpisywanie metody bind() zamiast wpisywać:

$("h1").bind("click",function(event){alert("Witaj");})

Można skrócić zapis wpisując tylko:

$("h1").click(function(event){alert("Witaj");})

Usuwanie zdarzeń - unbind

Do usuwania podpiętych zdarzeń wykorzystywana jest metoda unbind(). Gdy metoda ta zostanie użyta bez żadnego parametru, usunie wszystkie zdarzenia podpięte do strony. Chcąc usunąć tylko zdarzenia wykonywane po kliknięciu myszą jako parametr, trzeba podać click.

W tym zadaniu usuniemy wcześniej dodaną obsługę zdarzenia klik na elemencie H1.

  1. Nie odświeżaj strony.
  2. W prawym dolnym rogu wpisz:
$("h1").unbind()
  1. Kliknij w nagłówek strony i sprawdź, czy zostało wyświetlone okno takie, jak poprzednio.

Podwójne kliknięcie

Częstym zdarzeniem w aplikacjach systemu windows jest podwójne klikniecie myszką. W jQuery możemy również obsłużyć je za pomocą metodydblclick(), która jest skrótem metody .bind("dblclick", function(){}).

W tym zadaniu, po dwukrotnym kliknięciu na element H1 w elemencie o id=pokaz zostanie wyświetlona informacja o tym zdarzeniu.

  1. Odśwież stronę.
  2. W oknie narzędzi deweloperskich w prawym dolnym rogu wpisz:
$("h1").dblclick(function(){$("#pokaz").text("kliknąłeś podwójnie");})
  1. Wciśnij Enter.
  2. Kliknij dwukrotnie w nagłówek strony (Rys. 3.).

Rys. 3. Wynik podwójnego kliknięcia w nagłówek.

Zmiana koloru elementów po najechaniu kursorem

Innym ważnym elementem interakcji jest podświetlenie (zmiana kolorów lub innych parametrów) elementu, nad którym znajduje się kursor. W CSS 2.1 możemy obsłużyć tylko zmianę wyglądu elementu odnośnika. W jQuery zaimplementowano metodę hover(). Jest ona połączeniem zdarzeń mouseeneter i mouseleave DOM. Składnia metody jest następująca:

.hover( funkObslugiIn(obiektyZdarzenia), funkObslugiOut(obiektyZdarzenia) )

Gdzie

  • funkObslugiIn jest funkcją wywoływaną w momencie zdarzenia mouseeneter,
  • funkObslugiOut jest funkcją wywoływaną w momencie zdarzenia mouseleave.
  1. Odśwież stronę.
  2. W oknie narzędzi deweloperskich w prawym dolnym rogu wpisz:
$("*").hover(function(){$(this).css("color","blue");},function(){$(this).css("color","black");})
  1. Wciśnij Enter.
  2. Przejedź kursorem po elementach znajdujących się na stronie.

Podsumowanie

W tym artykule nauczyliśmy się obsługiwać podstawowe zdarzenia na stronie internetowej. Wiemy także, jak usuwać podpięte zdarzenia. Umiemy podświetlać tekst po przesunięciu kursora, dzięki czemu nasza strona wygląda dużo ciekawiej.

W kolejnym artykule nauczymy się lepiej wykorzystywać mechanizm obsługi zdarzeń w jQuery.