Az események kezelése a jQuery használatának egyik nagy oka. Van néhány keresztböngészőbeli különbség a végrehajtás módjában, amely a jQuery egy egyszerű API-vá normalizálódik, miközben érvényesít néhány bevált gyakorlatot.
Lényegében egy módszert kell ismernie: .on()- ez így működik:
$("button").on("click", function() ( // do something ));Itt .on()csak két paramétert adunk meg a módszernek. Az esemény neve („kattintás”) és egy futtatni kívánt funkció, amikor az esemény a kiválasztás bármelyik elemén megtörténik. Elég tisztán olvas, nem?
Az emberek, akik rendelkeznek némi tapasztalattal jQuery ismerős lehet más kötési módszerek, mint .bind(), .live()vagy .delegate(). Ne aggódjon már ezek miatt, a modern jQuery mindegyiket egyesítette, .on()amelyek mindig a legjobb gyakorlatot követik el.
Ha egy eseményt a fentiek szerint kötünk, akkor (és ez általában okos) felvehet egy paraméter nevet a függvénybe. Ez a paraméter az esemény esemény objektuma lesz:
$("button").on("click", function(event) ( // event => "the event object" ));Az esemény objektumon keresztül rengeteg információt kap. Már egy kicsit ismered, mert mi használtuk .preventDefault()és .stopPropagation(). De sok más egyenes információ is található abban az objektumban. Ilyen például az, hogy milyen típusú eseményről volt szó (ha több esemény ugyanazt a funkciót indítja el), mikor történt, hol történt (adott esetben koordináták), melyik elemen történt, és még sok más. Kódoláskor érdemes rendszeresen ellenőrizni az eseményobjektumot.
Van egy esemény delegálási koncepció, amely rendkívül fontos az eseményekkel való munka során. Ez egy nagyon okos modern gyakorlat. Ez magában foglalja a hatókör gondolatát.
Az eseménykötés gondolkodásmódjának hagyományos módja az, hogy „keresse meg az összes gombot az oldalon, és kössön hozzájuk egy kattintási eseményt”. Ez természetesen működik, de ez:
- Nem túl hatékony
- Törékeny
Nem hatékony, mert azonnal kényszeríti a JavaScriptet, hogy megtalálja az összes gombelemet, amikor delegálással csak egy könnyebben megtalálható elemet találhat.
Törékeny, mert ha további gombok kerülnek az oldalra, akkor már hiányolták a hajót a kötésen, és újra kell kötni őket.
Eseménydelegációval azt a kattintási eseményt egy olyan elemhez kötné, amely magasabb a DOM-fán, mint azok a gombok, amelyek véletlenül tartalmazzák mindet. Lehet valahol, lehet, hogy ő documentmaga. Amikor a kattintási eseményt ahhoz a magasabb elemhez köti, elmondja neki, hogy továbbra is csak a gombokon végzett kattintások érdeklik. Majd amikor egy gombra kattintanak, az esemény bugyborékolásán keresztül, akkor ez a kattintás végül a magasabb elemen fog elindulni. De az eseményobjektum tudni fogja, hogy az eredeti kattintás megtörtént-e egy gombra, vagy sem, és az a funkció, amelyet az adott eseményre beállított, vagy be fog kapcsolni, vagy nem fog aktiválódni ezen információk ismeretében.
Ebben a képernyőn ezt mutatjuk be:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Most képzeljük el, ha még egy e . Nincs szükségünk újracsatolni semmilyen eseményt, mert az esemény továbbra is boldogan kötődik a hatókörhöz, és az események továbbra is buborékok lesznek az újonnan hozzáadott szövegterületről. Ez különösen hasznos olyan webalkalmazás-környezetekben, ahol rendszeresen új elemeket ad hozzá az oldalhoz.
A jQuery eseménykötéssel kapcsolatban még egy jó dolog, hogy nem zárják ki egymást. Ha hozzáad egy újabb kattintáskezelőt ugyanahhoz az elemhez, amelyik már rendelkezik, akkor csak egy újat ad hozzá. Nem írod felül az előzőt. A jQuery ezt elég kecsesen kezeli az Ön számára. Mindig kikapcsolhatja őket, ha valóban felül akart írni egy korábban kötött függvényt.
Ha ugyanaz a pontos esemény, akkor érdemes tudni, hogy egy adott és nem a másik feloldásához meg kell neveznie az eseményeket. Ez úgy történik, hogy egy pontot használ az esemény nevében, például 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()amint azt korábban nem említettük, így oldja meg az eseményeket.
Rengeteg lehetséges DOM esemény lehetséges. A kattintás a legfontosabb nyilvánvaló, de van dupla kattintás, az egérgomb és az egérmutató, a billentyűzár és a billentyűkombináció, olyan speciális formák, mint az elmosódás és a változás, és még sok más. Ha érdekli a teljes lista, beszerezhet egy ilyet.
Több eseményt egyszerre köthet így:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Vannak olyan esetek, amikor egy esemény bekövetkezésére számítasz, de ha ez megtörténik, akkor már nem törődsz vele, vagy kifejezetten nem akarod tovább aktiválni azt a funkciót, amelyet kötöttél. Erről szól a .one()funkció. Ennek szokásos használati esete az űrlap elküldés gomb (ha az Ajaxszal vagy bármi mással foglalkozik). Valószínűleg lényegében le szeretné tiltani azt a beküldési gombot, miután megnyomta azt, amíg fel nem tudja dolgozni az információt és megadja nekik a megfelelő visszajelzést. Természetesen nem ez az egyetlen használati eset, de ezt csak tartsa szem előtt. .one()== csak egyszer.