Renginių tvarkymas yra dar viena iš tų pagrindinių priežasčių, kodėl reikia naudoti „jQuery“. Yra keletas kryžminių naršyklių skirtumų, kaip tai padaryti, o „jQuery“ normalizuojasi į vieną paprastą API, kartu įgyvendindama kai kurias geriausias praktikas.
Iš esmės reikia žinoti vieną metodą: .on()- jis veikia taip:
$("button").on("click", function() ( // do something ));Čia .on()metodui suteikiame tik du parametrus. Įvykio pavadinimas („paspaudimas“) ir funkcija, kurią reikia paleisti, kai tas įvykis įvyksta bet kuriame to pasirinkimo elemente. Skaito gana švariai, ar ne?
Žmonės, turintys ankstesnės „jQuery“ patirties, gali būti susipažinę su kitais privalomaisiais metodais, pvz .bind(). .live(), Arba .delegate(). Nebesijaudinkite dėl jų, šiuolaikinis „jQuery“ sujungė juos visus, .on()o tai visada daro geriausią praktiką.
Susieję įvykį, kaip tai darėme aukščiau, galite (ir tai paprastai yra protinga) įtraukti į parametrą parametro pavadinimą. Šis parametras bus „įvykio objektas“ funkcijos viduje:
$("button").on("click", function(event) ( // event => "the event object" ));Per tą įvykio objektą gausite daug informacijos. Jūs jau esate šiek tiek susipažinęs, nes mes naudojome tai .preventDefault()ir .stopPropagation(). Tame objekte taip pat yra daugybė kitos tiesioginės informacijos. Dalykai, pvz., Koks įvykio tipas buvo (tuo atveju, jei keli įvykiai paleidžia tą pačią funkciją), kada tai įvyko, kur įvyko (koordinatės, jei taikoma), kuris elementas įvyko ir daug daugiau. Koduojant verta reguliariai tikrinti įvykio objektą.
Yra renginių delegavimo koncepcija, kuri yra itin svarbi dirbant su renginiais. Tai labai protinga šiuolaikinė geriausia praktika. Tai apima srities idėją.
Tradicinis būdas galvoti apie įvykių įrišimą yra „rasti visus mygtukus puslapyje ir susieti su jais paspaudimo įvykį“. Tai, žinoma, veikia, bet tai yra:
- Nelabai efektyvu
- Trapi
Neveiksminga, nes jūs iš karto verčiate „JavaScript“ surasti visus tuos mygtukų elementus, kai, deleguodami, galite tiesiog rasti vieną lengviau randamą elementą.
Trapus, nes jei į puslapį bus pridėta daugiau mygtukų, jie jau praleido valtį ant įrišimo ir juos reikės iš naujo surišti.
Naudodamiesi įvykio delegavimu, tą paspaudimo įvykį susietumėte su elementu, kuris yra aukščiau DOM medžio nei mygtukai, kuriuose yra visi jie. Gali būti kažkur, gali būti documentpats. Susieję paspaudimo įvykį su tuo aukštesnio elemento elementu, pasakysite, kad jus vis tiek domina tik mygtukų paspaudimai. Tada spustelėjus mygtuką, įvykio burbuliavimo pobūdį, šis paspaudimas galiausiai suaktyvins aukštesnio elemento elementą. Bet įvykio objektas žinos, ar pradinis paspaudimas įvyko ant mygtuko, ar ne, o funkcija, kurią nustatėte suaktyvinti tame įvykyje, arba suveiks, arba ne, žinodama tą informaciją.
Šioje ekrano kopijoje mes tai parodome:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Dabar įsivaizduokite, jei prie to pridėtume dar vieną . Mums nereikia perrišti jokių įvykių, nes įvykis vis tiek yra laimingai susietas su apimtimi, o įvykiai vis tiek burbuliuos iš naujai pridėtos teksto srities. Tai ypač naudinga žiniatinklio programų aplinkose, kuriose reguliariai pridedate naujų elementų puslapyje.
Kitas geras dalykas, kurį reikia žinoti apie „jQuery“ renginių įrišimą, yra tai, kad jie vienas kito neišskiria. Jei prie to paties elemento, kuriame jau yra vienas, pridėsite dar vieną paspaudimų tvarkytuvą, jis tiesiog pridės kitą. Neperrašote ankstesnio. „jQuery“ jums tai tiesiog tvarko gana grakščiai. Visada galite juos atsieti, jei iš tikrųjų norėjote nepaisyti anksčiau susietos funkcijos.
Jei tai tas pats tikslus įvykis, verta žinoti, kad norėdami atsieti konkretų, o ne kitą, turėsite pavadinti įvykius pavadinimais. Tai atsitinka naudojant tašką įvykio pavadinime, pvz 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(), kaip mes to dar neminėjome, yra tai, kaip jūs susiejate įvykius.
Yra daug galimų DOM renginių. Spustelėjimas yra pagrindinis akivaizdus, bet yra dvigubas spustelėjimas, pelės klavišas ir pelės klavišas, klavišų paspaudimas ir klavišų klavišas, konkrečių formų formavimas, pvz., Suliejimas ir keitimas, ir dar daugiau. Jei jus domina visas sąrašas, galite jį įsigyti.
Vienu metu galite susieti kelis įvykius taip:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Tam tikromis aplinkybėmis laukiate įvykio įvykio, tačiau kai jis įvyksta, jums tai daugiau nerūpi arba aiškiai nenorite paleisti funkcijos, kurią buvote susieję. Apie tai ir .one()yra funkcija. Standartinis naudojimo atvejis yra formos pateikimo mygtukas (jei tvarkote „Ajax“ ar bet ką kitą). Tikriausiai norėsite išjungti tą pateikimo mygtuką, kai jie jį paspaus, kol galėsite apdoroti tą informaciją ir pateikti jiems reikiamą atsiliepimą. Žinoma, tai nėra vienintelis naudojimo atvejis, bet tiesiog turėkite tai omenyje. .one()== tik vieną kartą.