Obsługa zdarzeń to kolejny z ważnych powodów, dla których warto używać jQuery. Istnieją pewne różnice między przeglądarkami w sposobie wykonania, które jQuery normalizuje do jednego prostego interfejsu API, wymuszając jednocześnie kilka najlepszych praktyk.
Jest zasadniczo jedna metoda, którą musisz znać: .on()- działa w ten sposób:
$("button").on("click", function() ( // do something ));Tutaj podajemy .on()metodzie tylko dwa parametry. Nazwa zdarzenia („kliknięcie”) i funkcja, która ma zostać uruchomiona, gdy zdarzenie to nastąpi na dowolnym elemencie w tym zaznaczeniu. Czyta się całkiem czysto, prawda?
Ludzie z jakiegoś poprzedniego doświadczenia jQuery może znać inne metody wiązania podoba .bind(), .live()albo .delegate(). Nie martw się już o to, nowoczesny jQuery połączył je wszystkie w .on()co zawsze sprawdza się najlepiej.
Podczas wiązania zdarzenia, tak jak zrobiliśmy to powyżej, możesz (i zazwyczaj jest to rozsądne) dołączyć nazwę parametru do funkcji. Ten parametr będzie „obiektem zdarzenia” wewnątrz funkcji:
$("button").on("click", function(event) ( // event => "the event object" ));Dzięki temu obiektowi zdarzenia uzyskujesz wiele informacji. Już go trochę znasz, ponieważ używaliśmy go do .preventDefault()i .stopPropagation(). Ale w tym obiekcie jest również wiele innych prostych informacji. Rzeczy takie jak rodzaj zdarzenia (w przypadku, gdy wiele zdarzeń uruchamia tę samą funkcję), kiedy to się stało, gdzie się wydarzyło (współrzędne, jeśli dotyczy), w którym elemencie się wydarzyło i wiele więcej. Podczas kodowania warto regularnie sprawdzać obiekt zdarzenia.
Istnieje koncepcja delegowania wydarzeń, która jest niezwykle ważna w pracy z wydarzeniami. Jest to bardzo inteligentna, najlepsza praktyka współczesnych czasów. Zawiera ideę zakresu.
Tradycyjny sposób myślenia o powiązaniu zdarzeń przypomina „znajdź wszystkie przyciski na stronie i przypisz do nich zdarzenie kliknięcia”. To oczywiście działa, ale tak jest:
- Niezbyt wydajne
- Kruchy
Nieefektywne, ponieważ od razu zmuszasz JavaScript do znalezienia wszystkich tych elementów przycisków, podczas gdy z delegacją możesz po prostu znaleźć jeden łatwiejszy do znalezienia element.
Kruche, ponieważ jeśli więcej przycisków zostanie dodanych do strony, to już przegapili łódkę na wiązaniu i będą musieli zostać ponownie związani.
W przypadku delegowania zdarzenia można powiązać to zdarzenie kliknięcia z elementem znajdującym się wyżej w drzewie DOM niż przyciski, które zawierają je wszystkie. Może być gdzieś, może być documentsobą. Kiedy powiążesz zdarzenie kliknięcia z tym wyższym elementem, mówisz mu, że nadal interesują Cię tylko kliknięcia przycisków. Następnie, gdy przycisk zostanie kliknięty, ze względu na charakter bulgotania zdarzenia, kliknięcie to w końcu uruchomi element znajdujący się wyżej. Ale obiekt zdarzenia będzie wiedział, czy pierwotne kliknięcie miało miejsce na przycisku, czy nie, a funkcja, którą uruchomiłeś dla tego zdarzenia, uruchomi się lub nie uruchomi, znając te informacje.
W tym screencastie pokazujemy, że w ten sposób:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Teraz wyobraź sobie, że dodaliśmy do tego jeszcze jeden . Nie musimy ponownie wiązać żadnych wydarzeń, ponieważ zdarzenie jest nadal szczęśliwie powiązane z zakresem, a zdarzenia nadal będą pojawiać się z nowo dodanego obszaru tekstowego. Jest to szczególnie przydatne w środowiskach aplikacji internetowych, w których regularnie dodajesz nowe elementy do strony.
Inną dobrą rzeczą, którą warto wiedzieć o wiązaniu zdarzeń jQuery jest to, że nie wykluczają się one wzajemnie. Jeśli dodasz kolejny moduł obsługi kliknięcia do tego samego elementu, który już go ma, po prostu doda kolejny. Nie nadpisujesz poprzedniego. jQuery radzi sobie z tym dość wdzięcznie za Ciebie. Zawsze możesz je rozpiąć, jeśli rzeczywiście chciałeś przesłonić wcześniej powiązaną funkcję.
Jeśli jest to dokładnie to samo zdarzenie, warto wiedzieć, że aby usunąć powiązanie konkretnego z nich, a nie drugiego, musisz nadać im przestrzeń nazw. Dzieje się to za pomocą kropki w nazwie wydarzenia, na przykład click.namespace.
$("#scope").on("click.one", "textarea", function(event) ( )); $("#scope").on("click.two", "textarea", function(event) ( )); // Just remove the first $("#scope").off("click.one", "textarea");.off(), jak o tym wcześniej nie wspominaliśmy, polega na rozwiązaniu powiązań wydarzeń.
Istnieje wiele możliwych zdarzeń DOM. Kliknięcie jest głównym, oczywistym, ale jest podwójne kliknięcie, przycisk myszy i klawisz myszy, klawisz w dół i klawisz, tworząc określone, takie jak rozmycie i zmiana, i mnóstwo innych. Jeśli jesteś zainteresowany pełną listą, możesz otrzymać taką.
Możesz powiązać wiele wydarzeń jednocześnie w następujący sposób:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Są pewne okoliczności, w których czekasz na zdarzenie, ale kiedy to nastąpi, nie przejmujesz się już tym lub wyraźnie nie chcesz już uruchamiać funkcji, którą już przypisałeś. Na tym .one()polega funkcja. Standardowym przypadkiem użycia jest przycisk przesyłania formularza (jeśli pracujesz z Ajaxem lub czymkolwiek). Prawdopodobnie chcesz zasadniczo wyłączyć ten przycisk przesyłania po naciśnięciu go, dopóki nie będziesz mógł przetworzyć tych informacji i przekazać im odpowiednią opinię. To oczywiście nie jedyny przypadek użycia, ale po prostu miej to na uwadze. .one()== tylko raz.