Sündmuste käitlemine on jQuery kasutamise üks suur põhjus. Kuidas seda teha, on brauserite vahel erinevused, mis jQuery normaliseerub üheks lihtsaks API-ks, rakendades samal ajal mõningaid parimaid tavasid.
Peate teadma ühte meetodit: .on()- see töötab järgmiselt:
$("button").on("click", function() ( // do something ));Siin anname .on()meetodile ainult kaks parameetrit. Sündmuse nimi („klõps”) ja funktsioon, mida käivitada, kui see sündmus juhtub selle valiku mis tahes elemendil. Loeb päris puhtalt, kas pole?
Inimesed mõned eelmise jQuery kogemus võib olla tuttav muude siduvate meetodeid meeldi .bind(), .live()või .delegate(). Ärge muretsege enam nende pärast, kaasaegne jQuery on need kõik ühendanud, .on()milleks on alati parim tava.
Sündmuse sidumisel, nagu me eespool tegime, saate funktsiooni lisada parameetri nime (ja tavaliselt on see arukas). See parameeter on funktsiooni sees olev sündmusobjekt:
$("button").on("click", function(event) ( // event => "the event object" ));Selle sündmuse objekti kaudu saate palju teavet. Sa oled sellega juba pisut tuttav, sest me kasutasime seda .preventDefault()ja .stopPropagation(). Kuid selles objektis on ka palju muud otsest teavet. Asjad, näiteks mis tüüpi sündmus see oli (juhul kui mitu sündmust käivitavad sama funktsiooni), millal see juhtus, kus see juhtus (koordinaadid, kui see oli asjakohane), millisel elemendil see juhtus ja palju muud. Kodeerides tasub sündmuse objekti regulaarselt kontrollida.
Ürituste delegeerimisel on kontseptsioon, mis on üritustega töötamisel äärmiselt oluline. See on tänapäeval väga nutikas parim tava. See hõlmab idee ulatusest.
Traditsiooniline viis sündmuste sidumise üle mõelda on näiteks: „leidke lehelt kõik nupud ja seostage neile kliki sündmus”. See muidugi töötab, kuid see on:
- Pole eriti tõhus
- Habras
Pole efektiivne, sest sunnite JavaScripti kohe kõiki neid nupuelemente leidma, kui delegeerimisel võite leida lihtsalt ühe hõlpsamini leitava elemendi.
Habras, sest kui lehele lisatakse rohkem nuppe, on nad juba paati sidumisel maha jätnud ja tuleb uuesti köita.
Sündmuste delegeerimisel seotaksite selle kliki sündmuse elemendiga, mis asub DOM-puu kõrgemal kui nupud, mis neid kõiki sisaldavad. Võib olla kuskil, võib olla documentise. Kui seote klõpsamise sündmuse selle kõrgema elemendiga, ütlete talle, et teid huvitavad endiselt ainult klõpsud, mis toimusid nuppudel. Siis kui nupul klõpsatakse, siis sündmuse mullitamise olemuse tõttu käivitub see klõps lõpuks kõrgemal asuval elemendil. Kuid sündmusobjekt teab, kas algne klõps toimus nupul või mitte, ja funktsioon, mille olete selle sündmuse jaoks käivitanud, käivitub või mitte, teades seda teavet.
Selles ekraanipildis demonstreerime järgmist:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Nüüd kujutage ette, kui lisasime teise selle . Me ei pea ühtegi sündmust uuesti siduma, sest sündmus on endiselt õnnelikult seotud ulatuse ja sündmused mullitavad äsja lisatud tekstialast. See on eriti kasulik veebirakenduste keskkondades, kus lisate lehele regulaarselt uusi elemente.
JQuery sündmuste sidumise kohta on veel hea teada, et need ei välista üksteist. Kui lisate samale täpselt samale elemendile, millel see juba on, lisatakse veel üks klõpsude käitleja, lisab see lihtsalt teise. Te ei kirjuta eelmist üle. jQuery tegeleb sellega teie jaoks üsna graatsiliselt. Saate need alati lahti siduda, kui soovite tõepoolest varem seotud funktsiooni tühistada.
Kui see on sama täpne sündmus, tasub teada, et konkreetse neist lahti sidumiseks peate teise sündmused nimetama. See juhtub, kasutades sündmuse nimes punkti, näiteks 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(), nagu me pole seda varem maininud, on see, kuidas te sündmusi lahti köidate.
Võimalikke DOM-i üritusi on palju. Klikk on peamine peamine ilmne, kuid on topeltklõps, hiirekursor ja hiireklahv, klahvivajutus ja klahvistik, konkreetsed vormid, näiteks hägusus ja muutus, ning palju muud. Kui olete huvitatud täielikust loendist, võite selle hankida.
Saate korraga siduda mitu sündmust järgmiselt:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Mõnel juhul ootate sündmuse toimumist, kuid kui see juhtub, ei huvita see teid enam ega soovi selgesõnaliselt funktsiooni, mille olete sidunud, käivitama. See on .one()funktsioon. Selle tavapärane kasutusjuht on vormi esitamise nupp (kui tegelete Ajaxiga või muuga). Tõenäoliselt soovite selle saatmisnupu pärast selle vajutamist sisuliselt keelata, kuni saate seda teavet töödelda ja neile asjakohast tagasisidet anda. See pole muidugi ainus kasutusjuhtum, kuid pidage seda lihtsalt meeles. .one()== vaid üks kord.