Obsługa zdarzeń za pomocą jQuery

ten wydarzenia są sytuacje, które występują w naszym dokumencie HTML, mogą być wyzwalane przez sytuacje samego systemu lub przez działania użytkownika. W obu przypadkach, gdy wystąpi zdarzenie, możliwe jest wykonanie przetwarzania końcowego za pomocą jQuery, dzięki czemu możemy osiągać lepsze efekty w naszych programach.
Ma to ogromne znaczenie, ponieważ znając ten aspekt i za pomocą frameworka możemy nadać naszym stronom internetowym i aplikacjom więcej dynamiki.
To pierwsza rzecz, na którą powinniśmy odpowiedzieć podczas pracy z wydarzeniami w jQuery, Wspomnieliśmy już, że zdarzenia to akcje lub sytuacje, które są wyzwalane przez system lub użytkownika, na przykład po zakończeniu ładowania dokumentu system wyzwala zdarzenie gotowy lub gotowe, gdy użytkownik kliknie element, wyzwalane jest zdarzenie homonimiczne.
Mając na uwadze te małe przykłady, możemy zobaczyć podstawową składnię do obsługi dowolnego typu zdarzenia, która jest następująca:

$ (selektor) .on ("eventName", function() {….})

Pamiętajmy lub doprecyzujmy, że selektor to nazwa, za pomocą której zamierzamy zlokalizować element w naszym dokumencie, a następnie za pomocą metody .na () Możemy wtedy powiedzieć mu, jakiego zdarzenia powinien nasłuchiwać, a kiedy to wykryje, może wykonać anonimową funkcję w naszej sekcji skryptu HTML.
Coś ciekawego, co możemy podkreślić, to to, że możemy użyć a obsługa różnych imprezInnymi słowy, możemy wykonać tę samą akcję w kilku sytuacjach, musimy tylko wymienić różne zdarzenia, których należy wysłuchać, składnia jest bardzo podobna do tej, którą właśnie widzieliśmy.
$ (selektor) .on ("nazwa zdarzenia1 nazwa zdarzenia2 nazwa zdarzenia3….", funkcja () {….})
Skoro znamy najbardziej podstawowe, musimy też zacząć to wiedzieć jQuery To zawsze ułatwi nam życie jako programistom, więc zapewniło kilka skrótów do tworzenia programów obsługi zdarzeń, dzięki czemu nie musimy składać pełnej deklaracji, jak widzieliśmy w poprzedniej części, ale stosujemy te skróty bezpośrednio do selektora.
Zobaczmy niektóre z najciekawszych skrótów używanych przez programistów, należy zauważyć, że nie jest to pełna lista dostępnych, aby uzyskać tę listę lepiej przejść bezpośrednio do oficjalnej dokumentacji, jednak aby mieć mały początek w temat, to jest więcej niż wystarczające.
gotowy ()Uruchamia się, gdy wszystkie elementy dokumentu SŁOŃCE są ładowane, to znaczy, gdy witryna jest gotowa, stąd jej nazwa. Należy zauważyć, że jest to zdarzenie systemowe.
Zatwierdź ()Dzieje się tak, gdy robimy przesyłanie formularzaCiekawostką jest to, że gdy pojawia się formularz, to nie wysyła on w tradycyjny sposób, ale raczej czeka na to, co powie mu to zdarzenie, więc możemy go wykorzystać jako punkt pośredni do walidacji pól, by wspomnieć przykład jego użycia.
Kliknij ()Działa, gdy użytkownik to robi Kliknij ze wskaźnikiem myszy nad elementem, może pochodzić z pola typu wejściowego, aby uwzględnić elementy takie jak lub kotwice . Jak możemy stwierdzić, czy zdarzenie zostało wywołane przez użytkownika.
rozmycie ()Dzieje się tak, gdy element na którym aktualnie się znajdujemy jest nieostry, np. piszemy w polu tekstowym i przechodzimy do kolejnego pola, w tym przypadku pierwsze pole straciło ostrość i to zdarzenie jest wykonywane.
skupiać ()W przeciwieństwie do poprzedniego zdarzenia dzieje się to właśnie wtedy, gdy skupiamy się na elemencie.
unosić się ()To zdarzenie ma miejsce, gdy najedziemy kursorem myszy na jakiś element SŁOŃCE, zwykle można zastosować do i kotwice .
Wybierz ()Występuje, gdy wybierzemy element w polu WybierzNa przykład mamy rozwijaną listę i wybieramy pozycję z jej zawartości.
reszta ()Występuje, gdy zmienia się wartość lub stan elementu, na przykład w obrębie pola Wybierz, gdy zmienimy opcję, którą widzimy tam odzwierciedloną.
Ponieważ wiemy trochę o najczęściej używanych zdarzeniach, wygenerujemy mały dokument, który wprowadzi niektóre z nich w życie, albo w pełnej składni, albo z przykładami, abyśmy mogli eksperymentować z obiema formami.
W poniższym kodzie zobaczymy, jak początkowo będziemy pisać za pomocą konsola.log () kiedy mamy dokument w gotowy (), zastosujemy kolejną wiadomość, gdy najedziemy myszą na a aby potwierdzić, jak to działa unosić się, wreszcie zobaczymy jak używać Kliknij () Tak skupiać () aby wyświetlić inne komunikaty. Spójrzmy na kod, który opisuje powyższe:

 Przykład zdarzenia 1
Najedź myszą na ten Div !!

Napisz coś tutaj:
Skup się na mnie:
$ (document) .ready (function () {console.log ("Zdarzenie gotowości się wydarzyło!!");}); $ ("# zdarzenie najechania"). hover (function () {console.log ("Zdarzenie najechania!");}); $ („Zdarzenie # Click”). click (function () {console.log („wywołaliśmy zdarzenie Click POWIĘKSZAĆ
Dzieje się tak, gdy chcemy, aby element miał różne powiązane zdarzenia, w ten sposób możemy lepiej zorganizować nasz kod i zapewnić wiele funkcji naszemu elementowi.
Istnieją dwie możliwości, wykonanie tej samej akcji dla kilku zdarzeń lub wykonanie innej akcji dla każdego z nich, w dowolny sposób będziemy musieli użyć pełnej składni, którą zdefiniowaliśmy już na początku.
Zobaczmy, jak połączyć różne akcje z różnymi zdarzeniami dla tego samego elementu. W tym celu musimy użyć podstawowej składni, takiej jak poniższa:

 $ (selektor) .on ({EventName1: function() {…}, EventName2: function() {…}}); 

Jak widać, używając tej formy składni, unikamy konieczności robienia czegoś takiego:

 $ (selektor) .ShortcutEvent1 (funkcja () {}); $ (selektor) .ShortcutEvent2 (funkcja () {}); 

Co pozwala nam być bardziej zorganizowanym, jednak oba są ważne i od dewelopera zależy wybór tego, który najbardziej mu odpowiada.
Ponieważ wiemy, jak połączyć wiele zdarzeń z elementem, zamierzamy zastosować to w praktyce, będziemy wybierać zdarzenia Kliknij () Tak skupiać () W tym przykładzie zastosujemy je do dwóch elementów, w pierwszym elemencie wygenerujemy taką samą odpowiedź dla każdego z nich, a w drugim każde zdarzenie będzie miało swoją własną odpowiedź. Zobaczmy kod, który musimy wykonać, aby osiągnąć nasz cel:

 Przykład zdarzenia 2
Ten sam wynik w wielu zdarzeniach:

Różne wyniki na wydarzenie:
$ („# element1”). on („fokus kliknięcia”, function() {console.log („pokazujemy to samo dla 3 zdarzeń!”);}); $ („# element2”). on ({click: function() {console.log („kliknęliśmy element2”);}, focus: function() {console.log („skupiliśmy się na element2”);}}); 

Tutaj widzimy, że musimy być ostrożni z drugą formą różnych odpowiedzi dla różnych wydarzeń, ponieważ wydarzenia nie są objęte cudzysłowami, jak wtedy, gdy robimy to w pierwszej formie, a także, że musimy ująć w nawiasy kwadratowe {} wszystko wewnątrz metody .na (), jest to błąd, który może wystąpić bardzo często, więc stosując ten środek ostrożności, możemy go uniknąć. Zobaczmy teraz, jak wygląda nasz przykład, gdy uruchomimy go w naszej przeglądarce:

POWIĘKSZAĆ
Odnotowujemy licznik z numer 2 kiedy wystąpią zdarzenia na pierwszym elemencie, oznacza to, że wykonaliśmy tę samą akcję dwa razy, niż planowaliśmy. W drugim elemencie zauważamy, że w konsoli wypisujemy dwie określone akcje, choć widzimy też, że występują one w innej kolejności niż ta, w której je umieściliśmy, to dlatego, że zdarzenie skupiać dzieje się przed Kliknij w hierarchii zdarzeń, zwłaszcza jeśli używamy klawisza PATKA poruszać się między polami.
Pod koniec tego samouczka dowiedzieliśmy się, jak możemy rozpocząć pracę w świecie obsługi zdarzeń za pomocą jQueryTo tylko otwieracz do ust, jednak dzięki tym małym funkcjom możemy osiągnąć wiele rzeczy w naszych aplikacjach.

Czy ten samouczek ci pomógł?
Jeśli nie

Pomóż ulepszyć ten samouczek!
Czy uważasz, że możesz poprawić lub ulepszyć ten samouczek? Możesz wysłać swoje wydanie ze zmianami, które uznasz za przydatne.
0 użytkowników edytowało ten samouczek. Edytuj i zostań uznanym ekspertem!
Edytuj ten samouczek

PODOBNE ĆWICZENIA

Jak przeciągać i pobierać obrazy za pomocą interfejsu użytkownika JQueryJak zrobić ikonę Spinnera lub ładowania za pomocą JQueryWtyczki i biblioteki JQuery do tworzenia stron internetowychDynamiczna siatka Flexgrid z JQuery i PHPObsługa JSON z Node.jsObsługa zdarzeń w Node.jsObsługa buforów w Node.jsWyrażenia regularne z Jquery
Brak komentarzy, bądź pierwszy!
Nie czekaj dłużej i wejdź do SolveticZostaw swój komentarz i skorzystaj z konta użytkownika Dołącz do nas!

Utwórz kontoZarejestruj się ZA DARMO, aby mieć swoje konto SolveticZarejestruj konto
ZidentyfikowaćMasz już konto? Podpisz tutajZidentyfikuj mnie na moim koncie




Informacja

 Opublikowany 12 grudnia 2014 14:44
 Zaktualizowano 14 grudnia 2014 05:44
 Odwiedziny 3,7 tys
 PoziomProfesjonalny


Najnowsze samouczki JavaScript

Jak zaktualizować NPM za pomocą PowerShell w systemie Windows 10?
Jak przeciągać i pobierać obrazy za pomocą interfejsu użytkownika JQuery
Jak zrobić ikonę Spinnera lub ładowania za pomocą JQuery
Jak przetłumaczyć stronę internetową na kilka języków?

Zobacz więcej o JavaScript