Upravljanje događajima je još jedan od onih velikih razloga za upotrebu jQueryja. Postoje neke razlike u pregledniku u načinu rada, što jQuery normalizira u jedan jednostavan API, istodobno provodeći neke najbolje prakse.
U osnovi postoji jedna metoda koju trebate znati: .on()- radi ovako:
$("button").on("click", function() ( // do something ));Ovdje dajemo .on()metodi samo dva parametra. Naziv događaja ("klik") i funkcija koja se pokreće kada se taj događaj dogodi na bilo kojem od elemenata u tom odabiru. Čita prilično čisto, zar ne?
Osobe s nekim prijašnjim jQuery iskustvo moglo biti upoznati s druge metode obvezujući se sviđa .bind(), .live()ili .delegate(). Ne brinite više zbog toga, moderni jQuery ih je kombinirao u sve .on()što uvijek čini najbolju praksu.
Kada vežete događaj kao što smo to učinili gore, možete (i to je obično pametno) uključiti ime parametra u funkciju. Taj će parametar biti "objekt događaja" unutar funkcije:
$("button").on("click", function(event) ( // event => "the event object" ));Kroz taj objekt događaja dobivate puno informacija. Već ste ga malo upoznali jer smo to navikli .preventDefault()i .stopPropagation(). Ali u tom objektu ima i puno drugih direktnih podataka. Stvari poput vrste događaja (u slučaju da više događaja aktivira istu funkciju), kada se dogodilo, gdje se dogodilo (koordinate, ako je primjenjivo), na kojem se elementu dogodilo i još mnogo toga. Vrijedno je redovito pregledavati objekt događaja prilikom kodiranja.
Postoji koncept delegiranja događaja koji je izuzetno važan u radu s događajima. To je vrlo pametna moderna najbolja praksa. Uključuje ideju opsega.
Tradicionalni način razmišljanja o vezivanju događaja je poput "pronađi sve gumbe na stranici i na njih veži klik". To naravno djeluje, ali je:
- Ne baš učinkovito
- Krhka
Nije učinkovito jer odmah prisiljavate JavaScript da pronađe sve one elemente gumba kada biste s delegiranjem mogli pronaći samo jedan element koji je lakše pronaći.
Krhko jer ako se na stranicu doda više gumba, već su propustili brod na povezu i morat će ih ponovno povezati.
S delegiranjem događaja povezali biste taj događaj klika s elementom koji se nalazi iznad DOM stabla od gumba koji slučajno sadrže sve njih. Možda je negdje, možda je ono documentsamo. Kada događaj klika povežete s onim elementom gore, kažete mu da vas i dalje zanimaju samo klikovi koji su se dogodili na gumbima. Zatim kada se klikne gumb, kroz prirodu bubble događaja, taj će klik na kraju pokrenuti element gore. Ali objekt događaja znat će je li se izvorni klik dogodio na gumbu ili ne, a funkcija koju ste postavili da se aktivira na tom događaju aktivirat će se ili se neće aktivirati znajući te informacije.
U ovom screencast-u to pokazujemo ovako:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Sada zamislite da smo dodali još na to . Ne trebamo ponovno vezati nijedan događaj, jer je događaj i dalje sretno vezan za opseg, a događaji će se i dalje stvarati iz novo dodanog tekstualnog područja. To je osobito korisno u okruženjima web aplikacija u kojima redovito dodajete nove elemente na stranicu.
Još jedna dobra stvar koju treba znati o vezivanju događaja jQuery je da se oni međusobno ne isključuju. Ako dodate isti rukovatelj klikom istom onom elementu koji ga već ima, samo će dodati još jedan. Ne prepisujete prethodni. jQuery to jednostavno rješava prilično graciozno za vas. Uvijek ih možete odvezati ako ste doista željeli nadjačati prethodno vezanu funkciju.
Ako se radi o istom točnom događaju, vrijedi znati da ćete, kako biste odvezali određenog, a ne drugog, prostor događaja morati imenovati prostorom. To se događa upotrebom točke u nazivu događaja, na primjer 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(), kako to već nismo spomenuli, način na koji odvezujete događaje.
Postoji puno mogućih DOM događaja. Klik je glavni glavni očit, ali tu su dvostruki klikovi, ulazak miša i miša, tipkovnica i tipkovnica, oni specifični, poput zamućivanja i promjene, i još tona. Ako vas zanima cjelovit popis, možete dobiti jedan poput ovog.
Možete istovremeno povezati više događaja istovremeno:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Postoje neke okolnosti u kojima čekate da se događaj dogodi, ali nakon što se dogodi, više vam nije stalo do njega ili izričito ne želite otpustiti funkciju koju ste bili vezali. O tome se .one()radi u funkciji. Standardni slučaj upotrebe je gumb za slanje obrasca (ako radite s Ajaxom ili nečim drugim). Vjerojatno želite onemogućiti taj gumb za slanje nakon što ga pritisnu sve dok ne budete mogli obraditi te podatke i dati im odgovarajuće povratne informacije. To nije jedini slučaj korištenja naravno, ali imajte to na umu. .one()== samo jednom.