Att hantera händelser är en annan av de stora anledningarna att använda jQuery. Det finns några skillnader mellan olika webbläsare i hur man gör, vilket jQuery normaliserar till ett enkelt API, samtidigt som några bästa metoder tillämpas.
Det finns i princip en metod du behöver veta: .on()- den fungerar så här:
$("button").on("click", function() ( // do something ));Här ger vi .on()metoden bara två parametrar. Namnet på händelsen ("klicka") och en funktion som ska köras när händelsen inträffar på något av elementen i det valet. Läser ganska rent, eller hur?
Personer med vissa tidigare jQuery erfarenhet kan vara bekant med andra bindande metoder som .bind(), .live()eller .delegate(). Oroa dig inte för dem längre, modern jQuery har kombinerat dem alla .on()som alltid gör bästa praxis.
När du binder en händelse som vi gjorde ovan kan du (och det är vanligtvis smart att) inkludera ett parameternamn i funktionen. Parametern kommer att vara "händelseobjektet" inuti funktionen:
$("button").on("click", function(event) ( // event => "the event object" ));Genom detta händelseobjekt får du massor av information. Du är redan lite bekant med det eftersom vi brukade det .preventDefault()och .stopPropagation(). Men det finns också massor av annan rak information i det objektet. Saker som vilken typ av händelse det var (om flera händelser avfyrar samma funktion), när det hände, var det hände (koordinater, om tillämpligt), vilket element det hände med och mycket mer. Det är värt att inspektera händelseobjektet regelbundet vid kodning.
Det finns ett begrepp för delegering av evenemang som är oerhört viktigt för att arbeta med evenemang. Det är en mycket smart moderna bästa praxis. Den innehåller idén om omfattning.
Ett traditionellt sätt att tänka på händelsebindning är som att "hitta alla knappar på sidan och binda en klickhändelse till dem." Det fungerar naturligtvis, men det är:
- Inte särskilt effektivt
- Ömtålig
Inte effektivt eftersom du omedelbart tvingar JavaScript att hitta alla dessa knappelement när du med delegering bara kan hitta ett lättare att hitta element.
Bräcklig, för om fler knappar läggs till på sidan har de redan missat båten på bindningen och måste bindas om.
Med händelsesdelegering binder du klickhändelsen till ett element som ligger högre upp i DOM-trädet än knapparna som råkar innehålla dem alla. Kan vara en någonstans, kan vara sig documentsjälv. När du binder klickhändelsen till det högre elementet säger du att du fortfarande bara är intresserad av klick som hänt på knapparna. Sedan, när en knapp klickas, kommer det klicket så småningom att aktiveras på elementet som är högre upp. Men händelseobjektet vet om det ursprungliga klicket inträffade på en knapp eller inte, och den funktion du har ställt in för att aktivera den händelsen kommer antingen att utlösas eller inte att känna till den informationen.
I den här skärmutsändningen visar vi att det här:
$("#scope").on("click", "textarea", function(event) ( // Do stuff! console.log(event); ));Tänk dig nu om vi har lagt till en annan till det . Vi behöver inte binda några händelser på nytt, för händelsen är fortfarande lyckligt bunden till omfattningen och händelserna kommer fortfarande att bubbla upp från det nyligen tillagda textområdet. Detta är särskilt användbart i webbappsmiljöer där du regelbundet lägger till nya element på sidan.
En annan bra sak att veta om bindning av jQuery-händelser är att de inte utesluter varandra. Om du lägger till en annan klickhanterare i samma exakta element som redan har en kommer den bara att lägga till ytterligare en. Du skriver inte över den tidigare. jQuery hanterar bara detta ganska graciöst för dig. Du kan alltid binda upp dem om du verkligen vill åsidosätta en tidigare bunden funktion.
Om det är samma exakta händelse är det värt att veta att du måste namnge händelserna för att binda upp en specifik av dem och inte den andra. Det händer genom att använda en punkt i händelsens namn, 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 inte har nämnt det tidigare, är hur du frigör händelser.
Det finns många möjliga DOM-evenemang. Klick är den stora huvudsakliga uppenbara, men det finns dubbelklickning, musentering och muslöv, tangentnedtryckning och tangentborttagning, bilda specifika som oskärpa och förändring och massor mer. Om du är intresserad av hela listan kan du få en sådan här.
Du kan binda flera händelser samtidigt så här:
$("#scope").on("keydown keyup", "textarea", function(event) ( console.log(event.keyCode); ));Det finns vissa omständigheter där du väntar på att en händelse ska hända, men när det väl är fallet bryr du dig inte längre om det eller vill uttryckligen inte avfyra den funktion du hade bundit längre. Det är vad .one()funktionen handlar om. Ett standardanvändningsfall för det är en formulärknapp (om du hanterar med Ajax eller något annat). Du vill sannolikt inaktivera den skicka knappen när de har tryckt på den tills du kan bearbeta den informationen och ge dem lämplig feedback. Det är naturligtvis inte det enda användningsfallet, men kom bara ihåg det. .one()== bara en gång.