Samouczek jQuery (część 4)

Reklama

Dzisiaj zamierzamy go podnieść i naprawdę pokazać, gdzie świeci jQuery - wydarzenia. Jeśli korzystałeś z poprzednich samouczków, powinieneś teraz dość dobrze rozumieć podstawowa struktura kodu jQuery Samouczek jQuery - Pierwsze kroki: podstawy i selektoryW zeszłym tygodniu mówiłem o tym, jak ważna jest jQuery dla każdego współczesnego programisty i dlaczego jest niesamowita. W tym tygodniu myślę, że nadszedł czas, aby ubrudzić sobie ręce kodem i dowiedzieć się, jak ... Czytaj więcej (i wszystkie okropne nawiasy klamrowe, które się z nim wiążą), a także jak znaleźć elementy DOM i niektóre rzeczy, które możesz zrobić, aby nimi manipulować Wprowadzenie do jQuery (część 2): Metody i funkcjeJest to część ciągłego wprowadzenia dla początkujących do serii programowania stron 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ć ... Czytaj więcej . Pokazałem również, jak uzyskać dostęp do konsola programisty w Chrome

Rozwiązywanie problemów z witryną za pomocą Narzędzi Chrome dla programistów lub FirebugJeśli do tej pory śledziłeś moje samouczki jQuery, być może masz już problemy z kodem i nie wiesz, jak je naprawić. W obliczu niefunkcjonalnego kodu, jest bardzo ... Czytaj więcej 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, których „nasłuchiwać”, a kiedy to zdarzenie zostanie wyzwolone, mogą w jakiś sposób zareagować.

Na przykład stuknięcie na ekranie iPhone'a wygeneruje pojedyncze „zdarzenie stuknięcia” 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. Nie musi to być konkretny „przycisk” - możesz dołączyć detektora 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ń zmieniły się znacznie na przestrzeni lat wraz z rozwojem jQuery, ale jest to obecnie akceptowana metoda, wykorzystująca na():

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

Aby słuchać „Kliknij”Zdarzenie dotyczące dowolnych elementów 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. Łatwe, prawda?

Zatrzymaj domyślne działanie:

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 („prześlij”, funkcja (zdarzenie) { console.log (zdarzenie); event.preventDefault (); zwracać fałsz; });

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, uderzył 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 to zdarzenie tylko na 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 „kliknięcia”, ale ma to 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 zacząć wpisywać swoje dane logowania.

$ (dokument) .ready (function () { $ ('# nazwa użytkownika'.focus (); });

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

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

Zostawię to 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.

Źródło obrazu: Ekran dotykowy przez Shutterstock