Samouczek jQuery (część 4) - Detektory zdarzeń

Dzisiaj zamierzamy go podnieść i naprawdę pokazać, gdzie świeci jQuery - wydarzenia. Jeśli korzystałeś z poprzednich samouczków, powinieneś teraz dość dobrze rozumieć podstawową strukturę kodu jQuery Samouczek jQuery - Pierwsze kroki: Podstawy i selektory Samouczek jQuery - Pierwsze kroki: Podstawy i selektory W zeszłym tygodniu mówiłem o tym, jak ważna jest jQuery do każdego współczesnego programisty i dlaczego jest niesamowity. W tym tygodniu myślę, że nadszedł czas, aby zabrudzić sobie ręce jakimś kodem i dowiedzieć się, jak… (i wszystkie okropne nawiasy klamrowe z nim związane), a także jak znaleźć elementy DOM i niektóre rzeczy, które możesz zrobić, aby manipulować je Wprowadzenie do jQuery (część 2): metody i funkcje Wprowadzenie do jQuery (część 2): metody i funkcje Jest to część ciągłego wprowadzenia dla początkujących do serii programów internetowych jQuery. Część 1 obejmowała podstawy jQuery dotyczące tego, jak włączyć go do projektu oraz selektorów. W części 2 będziemy kontynuować z… Pokazałem również, jak uzyskać dostęp do konsoli programisty w Chrome. Rozszyfruj problemy z witryną za pomocą Chrome Developer Tools lub Firebug Rozgadaj problemy z witryną za pomocą Chrome Developer Tools lub Firebug Jeśli do tej pory śledziłeś moje samouczki jQuery, być może niektóre problemy z kodem i nie wiadomo, jak je naprawić. W obliczu niefunkcjonalnego fragmentu kodu jest bardzo… i jak możesz go użyć do debugowania kodu jQuery.

Zdarzenia - między innymi zastosowaniami - pozwalają reagować na wydarzenia na stronie i interakcje użytkownika - klikanie, przewijanie i wszystkie inne wymyślne rzeczy.

Co to w ogóle jest wydarzenie?

W przypadku osób początkujących w programowaniu, które wymagają pewnego rodzaju interfejsu graficznego, zdarzenia odnoszą się do wszelkiego rodzaju interakcji między użytkownikiem a aplikacją; lub mogą być generowane wewnętrznie przez inny proces. Aplikacje wybierają zdarzenia do “słuchać”, a kiedy to zdarzenie zostanie uruchomione, mogą w jakiś sposób zareagować.

Na przykład stuknięcie w ekran iPhone'a wygeneruje jeden “dotknij wydarzenia” ze współrzędną x, y dokładnie tam, gdzie stuknąłeś. Jeśli stuknąłeś w konkretny obiekt, np. Przycisk, prawdopodobnie przycisk nasłuchiwał tego zdarzenia i odpowiednio wykona jakąś akcję. Gdyby była to tylko pusta część interfejsu, nic nie zostało dołączone do zdarzenia, więc nic się nie wydarzy.

Przeciągnięcie palcem po ekranie wygeneruje kolejne zdarzenie, które zawiera informacje o początku i końcu ruchu przeciągania oraz być może o prędkości. Wydarzenia zapewniają nam łatwy sposób reagować na rzeczy, które się zdarzają.

Łatwe: klikanie

Być może najłatwiejszym do nasłuchania jest zdarzenie kliknięcia, uruchamiane za każdym razem, gdy użytkownik kliknie element. To nie musi być żaden szczegół “przycisk” - możesz dołączyć detektor zdarzeń do dowolnego elementu na ekranie, ale jako twórca stron internetowych musisz oczywiście uczynić to intuicyjnym. Tworzenie pseudo-przycisku z litery za ukryty w akapicie tekstu jest możliwy, ale nieco głupi.

Metody dołączania detektora zdarzeń uległy znacznym zmianom na przestrzeni lat wraz z rozwojem jQuery, ale jest to obecnie akceptowana metoda, wykorzystująca on ():

$ (selektor) .on (zdarzenie, akcja);

Aby posłuchać “Kliknij” zdarzenie na dowolnych elementach z klasą .Kliknij, a następnie zaloguj komunikat do konsoli zawierającej tekst klikniętego elementu zrobiłbyś:

$ („. clickme”). on („click”, function () console.log ($ (this) .text ()););

Powinieneś zobaczyć, że akcja, którą tu osadziliśmy, jest anonimową funkcją, która korzysta z to selektor (który odnosi się do dowolnego obiektu, z którym aktualnie ma do czynienia jQuery) - w tym przypadku kliknięto. Następnie wyodrębniamy tekst klikniętego obiektu i logujemy go do konsoli. Łatwo, prawda?

Zatrzymaj akcję domyślną:

W pewnym momencie będziesz chciał dołączyć do czegoś takiego jak link lub przycisk przesłania formularza, który zwykle robi coś innego. W takim przypadku jest całkiem prawdopodobne, że nie chcesz, aby ta oryginalna akcja została wykonana - zamiast tego chcesz wykonać fantazyjną AJAX lub specjalną magię jQuery.

Aby zapobiec temu domyślnemu działaniu, mamy przydatną metodę o nazwie preventDefault. Oczywiście. Zobaczmy, jak by to działało w przypadku przycisku przesyłania formularza

$ („# myForm”). on („upload”, function (event) console.log (event); event.preventDefault (); return false;);

Kilka zmian tutaj - po pierwsze, przywiązujemy się do Zatwierdź wydarzenie zamiast kliknięcia. Jest to bardziej odpowiednie, gdy użytkownik ma do czynienia z formularzem tabulator, trafienie wchodzić, lub naciśnij a Zatwierdź przycisk - z których wszystkie uruchomiłyby domyślną akcję formularza. Przekazujemy również zmienną zdarzenia do funkcji anonimowej, abyśmy mogli odwołać się do dane zdarzenia. Następnie użyliśmy event.preventDefault () w połączeniu z zwróć false aby zatrzymać wykonywanie wszystkich zwykłych czynności.

W tym przypadku rejestruje tylko zdarzenie w konsoli, ale w rzeczywistości prawdopodobnie miałbyś tutaj moduł obsługi AJAX, który omówimy w następnej lekcji.

Wydarzenia mogą być również uruchamiane przez Ciebie

W dwóch poprzednich przykładach użyliśmy metody on do nasłuchiwania zdarzenia, ale można również ręcznie wywołać zdarzenie, wywołując je jako metodę. Trudno zrozumieć, dlaczego możesz użyć tego do wymuszenia “Kliknij”, ale ma większy sens, jeśli spojrzymy na zdarzenie skupiające.

Fokus jest zwykle używany z polami wejściowymi, aby uruchomić komunikat, gdy użytkownik kliknie pole, aby wprowadzić tekst - na przykład komunikat instruktażowy na temat używanego formatu. Możesz jednak użyć go, aby zmusić użytkownika do wprowadzenia pola nazwy użytkownika po załadowaniu strony - aby mogli natychmiast rozpocząć wpisywanie danych logowania.

$ (dokument) .ready (function () $ ('# username'.focus (););

Jeśli do tego pola nazwy użytkownika dołączyłeś również detektor zdarzeń aktywności, zostanie on również wyzwolony po wymuszeniu aktywności. Dlatego zdarzenia mogą być zarówno wyzwalane, jak i nasłuchiwane.

Na razie ćwicz, dołączając do różnych zdarzeń na stronie - możesz znaleźć pełną listę wszystkich dostępnych zdarzeń tutaj - pamiętaj, aby użyć funkcji zapobieganiaDefault, jeśli jest to link lub przycisk, i zobacz, jakie wyniki otrzymujesz z konsoli na temat danych zdarzeń.

Zostawię to tam dzisiaj, gdy zbliżamy się do końca tej mini-serii samouczków jQuery. Na koniec powinieneś być na tyle pewny, aby rzucić trochę jQuery na twoją stronę i sprawić, że coś zrobi. W przyszłym tygodniu przyjrzymy się AJAX - ważnej części nowoczesnej sieci, która pozwala ładować i wysyłać żądania w tle bez zakłócania działania użytkownika.

Jak zawsze opinie poniżej, pytania, komentarze i problemy są mile widziane.

Kredyt na zdjęcia: ekran dotykowy za pośrednictwem Shutterstock