Ravnanje z dogodki je še en od tistih velikih razlogov za uporabo jQuery. Obstaja nekaj razlik med brskalniki glede tega, kako to storiti, kar jQuery normalizira v en preprost API, hkrati pa uveljavi nekaj najboljših praks.
V bistvu morate vedeti eno metodo: .on()- deluje tako:
$("button").on("click", function() ( // do something ));Tu podajamo .on()metodo samo dva parametra. Ime dogodka (»klik«) in funkcija, ki se zažene, ko se ta dogodek zgodi na katerem koli elementu v tej izbiri. Bere precej čisto, kajne?
Ljudje z nekaj predhodnimi izkušnjami z jQuery morda poznajo druge metode vezave, kot .bind()so .live(), ali .delegate(). Ne skrbite jih več, moderni jQuery jih je združil v vse, .on()kar je vedno najboljša praksa.
Ko vežete dogodek, kot smo storili zgoraj, lahko v funkcijo vključite ime parametra (in to je običajno pametno). Ta parameter bo "objekt dogodka" znotraj funkcije:
$("button").on("click", function(event) ( // event => "the event object" ));Preko tega predmeta dogodka dobite veliko informacij. Saj ga že malo poznate, ker smo ga uporabljali .preventDefault()in .stopPropagation(). Toda v tem predmetu je tudi veliko drugih naravnih informacij. Na primer, za katero vrsto dogodka je šlo (v primeru, da več dogodkov sproži isto funkcijo), kdaj se je zgodilo, kje se je zgodilo (koordinate, če je primerno), na katerem elementu se je zgodilo in še veliko več. Pri kodiranju je vredno redno pregledovati objekt dogodka.
Obstaja koncept prenosa dogodkov, ki je izredno pomemben pri delu z dogodki. To je zelo pametna sodobna najboljša praksa. Vključuje idejo obsega.
Tradicionalni način razmišljanja o vezavi dogodkov je, kot da "poiščite vse gumbe na strani in jim privežite dogodek klika." To seveda deluje, vendar je:
- Ni zelo učinkovito
- Krhka
Neučinkovito, ker JavaScript takoj prisiliš, da poišče vse tiste elemente gumbov, ko bi z delegiranjem lahko poiskal le en element, ki ga je lažje najti.
Krhko, ker če se na stran doda več gumbov, so že zamudili jadrnico na vezavi in jih bo treba ponovno vezati.
Z delegiranjem dogodka bi ta dogodek klika povezali z elementom, ki je višje od drevesa DOM kot gumbi, ki vsebujejo vse. Mogoče je nekje, morda je to documentsamo. Ko dogodek klika povežete s tem višjim elementom, mu sporočite, da vas še vedno zanimajo samo kliki na gumbih. Potem, ko kliknete gumb, se bo zaradi narave mehurčka dogodka ta klik sčasoma sprožil na višjem elementu. Toda objekt dogodka bo vedel, ali se je na gumbu zgodil prvotni klik ali ne, in funkcija, ki ste jo nastavili na ta dogodek, se bo sprožila ali ne bo sprožila, če bo vedela za te informacije.
V tem predvajanju zaslona to dokažemo takole:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Zdaj pa si predstavljajte, če bi k temu dodali še enega . Nobenega dogodka ni treba ponovno vezati, ker je dogodek še vedno vezan na obseg, dogodki pa se bodo še vedno pojavili iz na novo dodanega območja besedila. To je še posebej koristno v okoljih spletnih aplikacij, kjer na stran redno dodajate nove elemente.
Še ena dobra stvar, ki jo je treba vedeti o vezavi dogodkov jQuery je, da se ne izključujejo. Če enakemu elementu, ki ga že ima, dodate še en obdelovalec klikov, bo le dodal drugega. Ne boste prepisali prejšnjega. jQuery to preprosto obravnava za vas. Vedno jih lahko odvežete, če ste resnično želeli preglasiti predhodno vezano funkcijo.
Če gre za enak natančen dogodek, je vredno vedeti, da boste za razvezavo določenega izmed njih in ne drugega morali dogodke poimenovati. To se zgodi z uporabo pike v imenu dogodka, na primer 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(), kot še nismo omenili, je način, kako odvežete dogodke.
Obstaja veliko možnih dogodkov DOM. Klik je glavni glavni očiten, vendar obstajajo dvojni klik, vnos miške in puščanje miške, tipkovnica in tipkovnica, posebni, kot so zamegljenost in spreminjanje, in še veliko več. Če vas zanima celoten seznam, lahko dobite takega.
Več dogodkov hkrati lahko povežete takole:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));V nekaterih okoliščinah čakate, da se dogodek zgodi, a ko se to zgodi, vam je za to več vseeno ali izrecno ne želite več izklopiti funkcije, ki ste jo imeli. V tem je .one()funkcija. Običajni primer za to je gumb za oddajo obrazca (če uporabljate Ajax ali karkoli drugega). Verjetno boste želeli ta gumb za oddajo v bistvu onemogočiti, ko ga bodo pritisnili, dokler ne boste mogli obdelati teh informacij in jim dati ustreznih povratnih informacij. To seveda ni edini primer uporabe, vendar samo imejte to v mislih. .one()== samo enkrat.