Å håndtere hendelser er en annen av de store grunnene til å bruke jQuery. Det er noen forskjellige nettleserforskjeller i hvordan du gjør det, som jQuery normaliserer til en enkel API, mens du håndhever noen gode fremgangsmåter.
Det er egentlig en metode du trenger å vite: .on()- den fungerer slik:
$("button").on("click", function() ( // do something ));Her gir vi .on()metoden bare to parametere. Navnet på hendelsen ("klikk") og en funksjon som skal kjøres når hendelsen skjer på noen av elementene i det valget. Les ganske rent, ikke sant?
Personer med noen tidligere jQuery erfaring kan bli kjent med andre bindende metoder liker .bind(), .live()eller .delegate(). Ikke bekymre deg for dem lenger, moderne jQuery har kombinert dem alle .on()som alltid gjør den beste fremgangsmåten.
Når du binder en hendelse som vi gjorde ovenfor, kan du (og det er vanligvis smart å) inkludere et parameternavn i funksjonen. Denne parameteren vil være "hendelsesobjektet" inne i funksjonen:
$("button").on("click", function(event) ( // event => "the event object" ));Gjennom dette hendelsesobjektet får du mye informasjon. Du er allerede litt kjent med det fordi vi pleide det .preventDefault()og .stopPropagation(). Men det er også mye annen rett opp informasjon i det objektet. Ting som hvilken type hendelse det var (i tilfelle flere hendelser utløser den samme funksjonen), når det skjedde, hvor det skjedde (koordinater, hvis aktuelt), hvilket element det skjedde på, og mye mer. Det er verdt å inspisere hendelsesobjektet regelmessig når du koder.
Det er et begrep om begivenhetsdelegering som er ekstremt viktig i arbeidet med hendelser. Det er en veldig smart moderne praksis. Den inneholder ideen om omfang.
En tradisjonell måte å tenke på hendelsesbinding er som "finn alle knappene på siden, og bind en klikkhendelse til dem." Det fungerer selvfølgelig, men det er:
- Ikke veldig effektiv
- Skjør
Ikke effektiv fordi du umiddelbart tvinger JavaScript til å finne alle disse knappelementene når du med delegering bare kan finne ett element som er lettere å finne.
Skjørt fordi hvis flere knapper blir lagt til på siden, har de allerede savnet båten på bindingen og må bindes på nytt.
Med hendelsesdelegering vil du binde klikkhendelsen til et element som er høyere oppe i DOM-treet enn knappene som tilfeldigvis inneholder dem alle. Kan være et sted, kan være det documentselv. Når du binder klikkhendelsen til det øvre elementet, forteller du at du fremdeles bare er interessert i klikk som skjedde på knappene. Så når det klikkes på en knapp, vil det klikket til slutt utløses på elementet som er høyere opp, av karakteren til begivenhetsbobling. Men hendelsesobjektet vil vite om det opprinnelige klikket skjedde på en knapp eller ikke, og funksjonen du har satt i gang for den hendelsen, vil enten avfyres eller ikke avfyres, vel vitende om den informasjonen.
I denne skjermsendingen demonstrerer vi det slik:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Tenk deg om vi la til en annen til det . Vi trenger ikke å binde noen hendelser på nytt, fordi hendelsen fremdeles lykkelig er bundet til omfanget, og hendelser vil fortsatt boble opp fra det nylig tilføyde tekstområdet. Dette er spesielt nyttig i webapp-miljøer der du regelmessig legger til nye elementer på siden.
En annen god ting å vite om jQuery-hendelsesbinding er at de ikke utelukker hverandre. Hvis du legger til en annen klikkbehandler til det samme nøyaktig elementet som allerede har en, vil den bare legge til en annen. Du overskriver ikke den forrige. jQuery håndterer dette ganske elegant for deg. Du kan alltid koble dem opp hvis du virkelig vil overstyre en tidligere bundet funksjon.
Hvis det er den samme eksakte hendelsen, er det verdt å vite at du må navngi hendelsene for å kunne koble opp en spesifikk av dem og ikke den andre. Det skjer ved å bruke en prikk i hendelsesnavnet, som 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(), som vi ikke har nevnt det før, er hvordan du løsner hendelser.
Det er mange mulige DOM-arrangementer. Klikk er den viktigste viktigste åpenbare, men det er dobbeltklikking, musetast og musemønster, tastetrykk og tastatur, danner spesifikke som uskarphet og endring, og mange flere. Hvis du er interessert i den komplette listen, kan du få en slik.
Du kan binde flere hendelser samtidig slik:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Det er noen omstendigheter der du venter på at en hendelse skal skje, men når den først gjør det, bryr du deg ikke om det lenger, eller ønsker ikke eksplisitt å fyre av funksjonen du hadde bundet lenger. Det er hva .one()funksjonen handler om. En standard brukstilfelle for det er en skjemainnleveringsknapp (hvis du håndterer med Ajax eller hva som helst). Du vil sannsynligvis deaktivere den innleveringsknappen etter at de har trykket på den til du kan behandle denne informasjonen og gi dem riktig tilbakemelding. Det er ikke det eneste bruksområdet selvfølgelig, men bare husk det. .one()== bare en gang.