Zpracování událostí je dalším z těch velkých důvodů, proč používat jQuery. Existují některé rozdíly mezi různými prohlížeči v tom, jak to udělat, které se jQuery normalizuje do jednoho jednoduchého rozhraní API, zatímco vynucuje některé doporučené postupy.
Existuje v podstatě jedna metoda, kterou potřebujete vědět: .on()- funguje takto:
$("button").on("click", function() ( // do something ));Zde dáváme .on()metodě pouze dva parametry. Název události („kliknutí“) a funkce, která se má spustit, když k této události dojde u některého z prvků v tomto výběru. Čte to docela čistě, že?
Lidé s nějakým předchozím jQuery zkušenosti by mohly být obeznámeni s jinými závaznými metody líbí .bind(), .live()nebo .delegate(). Už si s nimi nedělejte starosti, moderní jQuery je všechny zkombinoval, do .on()čehož vždy zapadá nejlepší praxe.
Při vazbě události, jak jsme to udělali výše, můžete (a je obvykle chytré) zahrnout do funkce název parametru. Tímto parametrem bude „objekt události“ uvnitř funkce:
$("button").on("click", function(event) ( // event => "the event object" ));Prostřednictvím tohoto objektu události získáte spoustu informací. Už jste s tím trochu obeznámeni, protože jsme to zvykli .preventDefault()a .stopPropagation(). Ale v tomto objektu je také spousta dalších přímých informací. Věci, jako o jaký typ události šlo (v případě, že tuto událost spouští více událostí), kdy se to stalo, kde se to stalo (souřadnice, pokud existují), na kterém prvku se to stalo a mnoho dalšího. Při kódování stojí za to pravidelně kontrolovat objekt události.
Existuje koncept delegování událostí, který je při práci s událostmi nesmírně důležitý. Je to velmi chytrá moderní praxe. Zahrnuje myšlenku rozsahu.
Tradiční způsob, jak přemýšlet o vazbě události, je jako „najít všechna tlačítka na stránce a svázat s nimi událost kliknutí.“ To samozřejmě funguje, ale je to:
- Není moc efektivní
- Křehký
Není efektivní, protože okamžitě nutíte JavaScript, aby našel všechny tyto prvky tlačítek, když s delegováním můžete najít jen jeden snadno vyhledatelný prvek.
Křehké, protože pokud se na stránku přidá více tlačítek, už jim loď na vazbě chyběla a bude třeba je znovu svázat.
S delegováním události byste tuto událost kliknutí svázali s prvkem, který je výše ve stromu DOM než tlačítka, která náhodou obsahují všechny. Může být někde, může být documentsám. Když vytvoříte vazbu události kliknutí na tento vyšší prvek, řeknete mu, že vás stále zajímají pouze kliknutí, ke kterým došlo na tlačítkách. Poté, když kliknete na tlačítko, díky povaze probublávání událostí se toto kliknutí nakonec spustí u prvku vyšší úrovně. Objekt události ale bude vědět, zda k původnímu kliknutí došlo na tlačítku, či nikoli, a funkce, kterou jste při této události nastavili, se při dané informaci spustí nebo nespustí.
V tomto vysílání ukážeme, že takto:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));A teď si představte, že jsme přidali další k tomu . Nepotřebujeme znovu vázat žádné události, protože událost je stále šťastně svázána s rozsahem a události budou stále bubliny z nově přidané textové oblasti. To je zvláště užitečné v prostředích webových aplikací, kde na stránku pravidelně přidáváte nové prvky.
Další dobrá věc, kterou byste měli vědět o vazbě událostí jQuery, je, že se vzájemně nevylučují. Pokud přidáte další obslužný program kliknutí ke stejnému přesně prvku, který již jeden má, přidá pouze další. Nepředepisujete předchozí. jQuery to za vás zpracovává docela elegantně. Vždy je můžete zrušit, pokud jste skutečně chtěli přepsat dříve vázanou funkci.
Pokud je to stejná přesná událost, stojí za to vědět, že k uvolnění konkrétní z nich a nikoli druhé, budete muset události pojmenovat. K tomu dochází pomocí tečky v názvu události, jako 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 jsme to dříve nezmínili, je způsob, jakým uvolňujete události.
Existuje spousta možných událostí DOM. Click je hlavní hlavní zřejmý, ale existuje dvojité kliknutí, mouseenter a mouseleave, keydown a keyup, tvoří specifické, jako je rozmazání a změna, a spousta dalších. Pokud vás zajímá kompletní seznam, můžete si takový pořídit.
Můžete vázat více událostí současně takto:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Existují okolnosti, kdy čekáte, až se událost stane, ale jakmile se tak stane, už se o ni nestaráte nebo už explicitně nechcete vypustit funkci, kterou jste již svázali. O tom je ta .one()funkce. Standardní případ použití je tlačítko pro odeslání formuláře (pokud pracujete s Ajaxem nebo cokoli jiného). Pravděpodobně budete chtít toto odesílací tlačítko v podstatě deaktivovat poté, co je stiskli, dokud tyto informace nezpracujete a nedáte jim odpovídající zpětnou vazbu. Není to samozřejmě jediný případ použití, ale mějte to na paměti. .one()== jen jednou.