Håndtering af begivenheder er en anden af de store grunde til at bruge jQuery. Der er nogle forskelle på tværs af browsere i, hvordan man gør det, hvilket jQuery normaliserer i en simpel API, samtidig med at nogle bedste praksis håndhæves.
Der er stort set en metode, du har brug for at vide: .on()- det fungerer sådan:
$("button").on("click", function() ( // do something ));Her giver vi .on()metoden kun to parametre. Navnet på begivenheden ("klik") og en funktion, der skal køres, når begivenheden sker på et af elementerne i dette valg. Læser temmelig rent, ikke?
Mennesker med nogle tidligere jQuery erfaring kan være bekendt med andre bindende metoder kan lide .bind(), .live()eller .delegate(). Du skal ikke bekymre dig om dem længere, moderne jQuery har kombineret dem alle, .on()som altid gør den bedste praksis.
Når du binder en begivenhed som vi gjorde ovenfor, kan du (og det er typisk smart at) inkludere et parameternavn i funktionen. Denne parameter vil være "begivenhedsobjektet" inde i funktionen:
$("button").on("click", function(event) ( // event => "the event object" ));Gennem dette begivenhedsobjekt får du masser af information. Du er allerede lidt fortrolig med det, fordi vi brugte det til .preventDefault()og .stopPropagation(). Men der er også mange andre lige informationer i det objekt. Ting som hvilken type begivenhed det var (i tilfælde af at flere begivenheder affyrer den samme funktion), når det skete, hvor det skete (koordinater, hvis relevant), hvilket element det skete på og meget mere. Det er værd at inspicere begivenhedsobjektet regelmæssigt under kodning.
Der er et begreb om begivenhedsdelegering, der er ekstremt vigtigt i arbejdet med begivenheder. Det er en meget smart moderne praksis. Det inkorporerer ideen om omfang.
En traditionel måde at tænke på binding af begivenheder er som "find alle knapper på siden og bind en klikbegivenhed til dem." Det fungerer selvfølgelig, men det er:
- Ikke særlig effektiv
- Skrøbelig
Ikke effektiv, fordi du straks tvinger JavaScript til at finde alle disse knapelementer, når du med delegering måske bare finder et element, der er lettere at finde.
Skør, fordi hvis flere knapper føjes til siden, har de allerede savnet båden på bindingen og bliver nødt til at blive bundet igen.
Med begivenhedsdelegering binder du klikhændelsen til et element, der er højere op i DOM-træet end knapperne, der tilfældigvis indeholder dem alle. Kan være et eller andet sted, måske det documentselv. Når du binder klikhændelsen til det højere element, fortæller du det, at du stadig kun er interesseret i klik, der skete på knapper. Derefter, når der klikkes på en knap, vil arten af boblende begivenhed i sidste ende udløse det klik på elementet, der er højere op. Men begivenhedsobjektet ved, om det oprindelige klik skete på en knap eller ej, og den funktion, du har indstillet til at affyre ved denne begivenhed, vil enten affyre eller ikke affyre ved at vide disse oplysninger.
I denne screencast demonstrerer vi det sådan:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Forestil dig nu, hvis vi tilføjede endnu en til det . Vi behøver ikke at genbinde nogen begivenheder, fordi begivenheden stadig er lykkeligt bundet til omfanget, og begivenheder vil stadig boble op fra det nyligt tilføjede tekstområde. Dette er især nyttigt i webapp-miljøer, hvor du regelmæssigt tilføjer nye elementer til siden.
En anden god ting at vide om binding af jQuery-begivenhed er, at de ikke er gensidigt eksklusive. Hvis du tilføjer en anden klikhåndterer til det samme nøjagtige element, der allerede har et, tilføjer det bare et andet. Du overskriver ikke den foregående. jQuery håndterer dette bare ret yndefuldt for dig. Du kan altid afbinde dem, hvis du virkelig ville tilsidesætte en tidligere bundet funktion.
Hvis det er den samme nøjagtige begivenhed, er det værd at vide, at for at afbinde en bestemt af dem og ikke den anden, skal du navngive begivenhederne. Det sker ved at bruge en prik i begivenhedsnavnet, ligesom 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 nævnt det før, er hvordan du frigør begivenheder.
Der er mange mulige DOM-begivenheder. Klik er den store vigtigste åbenlyse, men der er dobbeltklik, musen og museløven, tastaturet og tastaturet, form specifikke som sløring og forandring og masser mere. Hvis du er interesseret i den komplette liste, kan du få en som denne.
Du kan binde flere begivenheder på samme tid som denne:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Der er nogle omstændigheder, hvor du venter på, at en begivenhed skal ske, men når det sker, er du ligeglad med det eller udtrykkeligt ikke ønsker at affyre den funktion, du havde bundet længere. Det er hvad .one()funktionen handler om. En standard brugssag for det er en formular-knap (hvis du håndterer med Ajax eller hvad som helst). Du vil sandsynligvis i det væsentlige deaktivere den indsendte knap, når de har trykket på den, indtil du kan behandle disse oplysninger og give dem den rette feedback. Det er naturligvis ikke det eneste anvendelsestilfælde, men bare husk det. .one()== bare en gang.