Spracovanie udalostí je ďalším jedným z tých veľkých dôvodov, prečo používať jQuery. Existuje niekoľko rozdielov v tom, ako to urobiť, ktorý sa jQuery normalizuje do jedného jednoduchého rozhrania API, pričom sa vynucujú niektoré osvedčené postupy.
Existuje v zásade jedna metóda, ktorú potrebujete vedieť: .on()- funguje takto:
$("button").on("click", function() ( // do something ));Tu dávame .on()metóde iba dva parametre. Názov udalosti („kliknutie“) a funkcia, ktorá sa má spustiť, keď sa táto udalosť stane na ktoromkoľvek z prvkov v tomto výbere. Číta sa to pekne čisto, však?
Ľudia s nejakým predchádzajúcim jQuery skúsenosti by mohli byť oboznámení s inými záväznými metódy páči .bind(), .live()alebo .delegate(). Už si s nimi nerobte starosti, moderný jQuery ich spojil do všetkých .on()a vždy robí tie najlepšie postupy.
Pri viazaní udalosti, ako sme to robili vyššie, môžete (a je to zvyčajne inteligentné) zahrnúť do funkcie názov parametra. Týmto parametrom bude „objekt udalosti“ vo vnútri funkcie:
$("button").on("click", function(event) ( // event => "the event object" ));Prostredníctvom tohto objektu udalosti získate veľa informácií. Už ste s tým trochu oboznámení, pretože sme to zvykli .preventDefault()a .stopPropagation(). Ale v tomto objekte je tiež veľa ďalších priamych informácií. Napríklad veci, o aký typ udalosti išlo (v prípade viacerých udalostí, ktoré spúšťajú túto istú funkciu), kedy sa to stalo, kde sa to stalo (súradnice, ak sú použiteľné), na ktorom prvku sa to stalo, a oveľa viac. Pri kódovaní stojí za to pravidelne kontrolovať objekt udalosti.
Existuje koncepcia delegovania udalostí, ktorá je pri práci s udalosťami mimoriadne dôležitá. Je to veľmi šikovný osvedčený postup modernej doby. Zahŕňa myšlienku rozsahu.
Tradičným spôsobom, ako premýšľať o väzbe na udalosť, je napríklad „vyhľadať všetky tlačidlá na stránke a viazať na ne udalosť kliknutia.“ To samozrejme funguje, ale je to:
- Nie veľmi efektívne
- Krehký
Nie efektívne, pretože okamžite nútite JavaScript, aby našiel všetky tieto prvky tlačidiel, keď by ste s delegovaním mohli nájsť iba jeden ľahšie nájditeľný prvok.
Krehké, pretože ak sa na stránku pridá viac tlačidiel, už im loď na väzbe chýbala a bude ich treba znova zviazať.
Pri delegovaní udalosti by ste danú udalosť kliknutia naviazali na prvok, ktorý je vyššie v strome DOM ako tlačidlá, ktoré náhodou obsahujú všetky. Môže byť niekde, môže byť documentsám. Keď naviažete udalosť kliknutia na tento vyšší prvok, poviete mu, že vás stále zaujímajú iba kliknutia, ku ktorým došlo na tlačidlách. Keď potom kliknete na tlačidlo, v dôsledku prebublávania udalostí sa dané kliknutie nakoniec aktivuje v prvku vyššie. Objekt udalosti však bude vedieť, či k pôvodnému kliknutiu došlo na tlačidle alebo nie, a funkcia, ktorú ste pri tejto udalosti nastavili, bude s uvedenou informáciou buď spustená, alebo nespálená.
V tomto vysielaní ukážeme, že takto:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));A teraz si predstavte, že sme pridali ďalšie k tomu . Nepotrebujeme znova viazať žiadne udalosti, pretože udalosť je stále šťastne viazaná na rozsah a udalosti budú stále bublinkovať z novo pridanej textovej oblasti. To je obzvlášť užitočné v prostrediach webových aplikácií, kde na stránku pravidelne pridávate nové prvky.
Ďalšia dobrá vec, ktorú treba vedieť o väzbe udalostí jQuery, je, že sa navzájom nevylučujú. Ak pridáte ďalší obslužný program kliknutia k rovnakému prvku, ktorý už presne jeden má, pridá iba ďalší. Neprepisujete predchádzajúci. jQuery to za vás zaobchádza pomerne elegantne. Vždy ich môžete zrušiť, ak ste skutočne chceli prepísať predtým viazanú funkciu.
Ak je to rovnaká presná udalosť, stojí za to vedieť, že na zrušenie väzby konkrétnej jednej z nich, a nie druhej, budete musieť udalosti pomenovať. Stáva sa to tak, že sa v názve udalosti použije bodka, napríklad 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(), ako sme to ešte nespomenuli, slúži na odbúranie udalostí.
Existuje veľa možných udalostí DOM. Kliknutie je hlavným zjavným prvkom, ale je tu dvojité kliknutie, presunutie myši a opustenie myši, klávesové skratky a klávesové skratky, konkrétne tvary ako rozmazanie a zmena a ďalšie. Ak vás zaujíma kompletný zoznam, môžete si nejaký zaobstarať.
Môžete viazať viac udalostí naraz, napríklad takto:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Za určitých okolností čakáte na to, že sa udalosť stane, ale akonáhle sa to stane, už sa o ňu nestaráte alebo už vyslovene nechcete prepúšťať funkciu, ktorú ste už viazali. O tom je .one()funkcia. Štandardným prípadom použitia je tlačidlo na odoslanie formulára (ak pracujete s Ajaxom alebo s čímkoľvek iným). Pravdepodobne budete chcieť toto tlačidlo odosielania po jeho stlačení v podstate deaktivovať, kým tieto informácie nespracujete a nebudete im dať náležitú spätnú väzbu. Nie je to samozrejme jediný prípad použitia, ale nezabudnite na to. .one()== iba raz.