Notikumu apstrāde ir vēl viens no galvenajiem iemesliem, kāpēc jQuery izmantot. Kā to izdarīt, pārlūkprogrammā ir dažas atšķirības, kuras jQuery normalizē vienā vienkāršā API, vienlaikus ieviešot dažas labākās prakses.
Būtībā jums jāzina viena metode: .on()- tā darbojas šādi:
$("button").on("click", function() ( // do something ));Šeit mēs .on()metodei piešķiram tikai divus parametrus. Pasākuma nosaukums (“klikšķis”) un funkcija, kas jāizpilda, kad notikums notiek uz jebkura no atlases elementiem. Lasa diezgan tīri, vai ne?
Cilvēki ar dažiem iepriekšējiem jQuery pieredze varētu būt pazīstami ar citiem saistošajiem metodes, piemēram .bind(), .live()vai .delegate(). Neuztraucieties par tiem vairs, mūsdienīgais jQuery ir tos visus apvienojis, .on()kas vienmēr veic labāko praksi.
Saistot notikumu, kā mēs to darījām iepriekš, jūs varat (un parasti tas ir gudri) iekļaut parametrā nosaukumu funkcijā. Šis parametrs būs “notikuma objekts” funkcijas iekšpusē:
$("button").on("click", function(event) ( // event => "the event object" ));Caur šo notikuma objektu jūs saņemat daudz informācijas. Jūs jau esat mazliet pazīstams, jo mēs to izmantojām .preventDefault()un .stopPropagation(). Bet šajā objektā ir arī daudz citas tiešās informācijas. Piemēram, kāda veida notikums tas bija (ja vairāki notikumi aktivizē šo pašu funkciju), kad tas notika, kur tas notika (koordinātas, ja piemērojamas), kurā elementā tas notika, un vēl daudz vairāk. Kodējot, ir vērts regulāri pārbaudīt notikuma objektu.
Pastāv pasākuma deleģēšanas koncepcija, kas ir ārkārtīgi svarīga darbā ar pasākumiem. Tā ir ļoti gudra mūsdienu paraugprakse. Tajā iekļauta darbības jomas ideja.
Tradicionāls veids, kā domāt par notikumu saistīšanu, ir “atrast visas lapas pogas un piesaistīt tām klikšķu notikumu”. Tas, protams, darbojas, bet tas ir:
- Nav ļoti efektīva
- Trausls
Nav efektīvs, jo jūs nekavējoties piespiežat JavaScript atrast visus šos pogas elementus, kad, deleģējot, jūs varētu atrast tikai vienu vieglāk atrodamu elementu.
Trausls, jo, ja lapai tiek pievienotas vairāk pogas, viņi jau ir nokavējuši laivu uz saites un būs jāsaista no jauna.
Izmantojot notikumu deleģēšanu, jūs saistītu šo klikšķa notikumu ar elementu, kas atrodas augstāk DOM kokā nekā pogas, kurās, iespējams, atrodas visi no tiem. Var būt kaut kur, iespējams, documentpati par sevi. Saistot klikšķa notikumu ar šo augstākā elementa elementu, jūs sakāt, ka jūs joprojām interesē tikai klikšķi, kas veikti uz pogām. Tad, noklikšķinot uz pogas, ņemot vērā notikumu mutuļošanas raksturu, šis klikšķis galu galā tiks aktivizēts uz augstāk esošā elementa. Bet notikuma objekts uzzinās, vai sākotnējais klikšķis ir izdarīts uz pogas, vai nē, un funkcija, kuru esat iestatījis aktivizēt šajā notikumā, vai nu aktivizēsies, vai nedarbosies, zinot šo informāciju.
Šajā ekrāna pārraidē mēs demonstrējam, ka šādi:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Tagad iedomājieties, ja mēs vēl papildus tam . Mums nav atkārtoti jāsaista nekādi notikumi, jo notikums joprojām ir laimīgi saistīts ar darbības jomu, un notikumi joprojām burbuļos no nesen pievienotās teksta zonas. Tas ir īpaši noderīgi tīmekļa lietotņu vidēs, kur jūs regulāri pievienojat lapai jaunus elementus.
Vēl viena laba lieta, kas jāzina par jQuery notikumu saistīšanu, ir tā, ka tie nav savstarpēji izslēdzoši. Ja pievienosiet vēl vienu klikšķu apstrādātāju tam pašam tieši elementam, kuram tas jau ir, tas vienkārši pievienos vēl vienu. Jūs nepārrakstāt iepriekšējo. jQuery vienkārši rīkojas ar jums diezgan graciozi. Jūs vienmēr varat tos atsaistīt, ja patiešām vēlaties ignorēt iepriekš saistīto funkciju.
Ja tas ir tas pats precīzs notikums, ir vērts zināt, ka, lai atsaistītu konkrētu, nevis otru, notikumi ir jāatstāj nosaukumos. Tas notiek, notikuma nosaukumā, piemēram, izmantojot punktu 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(), kā mēs to iepriekš neesam minējuši, jūs atraisāt notikumus.
Ir daudz iespējamo DOM pasākumu. Klikšķis ir lielākais acīmredzamais, taču ir divkāršs klikšķis, peles ievadīšana un peles atstāšana, taustiņu nospiešana un taustiņu veidošana, specifisku formu veidošana, piemēram, izplūšana un mainīšana, un vēl daudz citu. Ja jūs interesē pilns saraksts, varat tādu iegūt.
Varat vienlaikus saistīt vairākus notikumus šādi:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Ir daži apstākļi, kad jūs gaida notikuma iestāšanos, taču, tiklīdz tas notiek, tas jums vairs nerūp vai nepārprotami nevēlaties vairs atlaist funkciju, kuru esat saistījis. Par to ir .one()funkcija. Standarta lietošanas gadījums ir veidlapas iesniegšanas poga (ja jūs strādājat ar Ajax vai ko citu). Jūs, iespējams, vēlaties atspējot šo iesniegšanas pogu pēc tam, kad viņi to ir nospieduši, līdz jūs varat apstrādāt šo informāciju un sniegt viņiem atbilstošas atsauksmes. Tas, protams, nav vienīgais izmantošanas gadījums, bet vienkārši paturiet to prātā. .one()== tikai vienu reizi.