JQuery - att koppla sig till händelser

I webbläsaren inträffar det många typer av händelser. Detta kan vara alltifrån att en användare klickar på något till att sidan meddelar att den ska laddas ur och att en annan sida ska laddas in i stället. Man kan skriva kod som kopplar sig till dessa händelser och som kommer att köras när händelsen inträffar. På så vis kan vi skapa mycket mer interaktivitet i vår webbsida och vi kan bygga upp custominiserade komponenter som gör i stort sett vad vi vill. Att kunna koppla sig till händelser är en av de viktigaste byggstenarna som krävs för att kunna skapa interaktiva webbapplikationer!

on

Den mest använda jQUery-metoden för att koppla sig till händelser är on. Med denna kan man koppla sig till i stort sett alla typer av händelser som kan tänkas uppstå i webbläsaren.

Vi börjar med ett kort exempel som kommer att göra så att en funktion körs varje gång användaren klickar på en knapp.

See the Pen xZdQGx by Patrik Grip-Jansson (@PGJ) on CodePen.

Det första vi gör är att söka reda på vårt button-element. Därefter anropar vi metoden on på sökresultatet för att koppla en händelsehanterare till knappen.

on:s första inparameter anger vilken händelsetyp vi vill koppla oss till. Det kan finnas olika typer av händelser som är specifika för vissa typer av objekt. Det finns även händelser som är tillgängliga för i stort sett alla typer av objekt. Det kan vara bra att kolla igenom dokumentationen för den typ av objekt som du tänker koppla dig till. Där finner du tillgängliga händelser dokumenterade.

I vårt exempel väljer vi att koppla oss till händelsetypen click. Denna inträffar varje gång någon trycker på något. Vilket ju onekligen är en passande händelse att använda på en knapp.

Som sista on-parameter skickar vi med den funktion som vi vill ska köras när händelsen inträffar. Detta kan vara en existerande funktion eller en anonym funktion. För att lättare kunna underhålla kod och göra den mer läsbar är det att rekommendera att man använder namngivna funktioner.

Vi skapar alltså en kopppling som gör att när händelsen click inträffar så körs vår funktion Tryckt. Man brukar kalla denna typ av funktioner för händelsehanterare. Det är viktigt att försöka hålla koden i händelsehanterare så snabb som möjligt. Speciellt då det handlar om händelser som inträffar ofta. Gör vi inte detta kan vår applikation börja gå långsamt för att det tar långt tid att hantera varje händelse.

I exemplets händelsehanterare görs inget superspeciellt. Vi ökar bara antalet gånger som användaren tryckt på knappen.

Eftersom vi kommer att ändra på span ofta, så söker vi direkt fram den en gång för alla och spar undan en referens till elementet i variabeln $span. Detta är en bra vana att göra så här. Det spar mycket tid och datorkraft när man bara söker fram sakerna då det verkligen behövs och sedan sparar undan resultatet för kommande användning.

Mer om händelsehanterare

I vårt första exempel skapade vi en mycket enkel händelsehanterare. För att kunna skapa mer avancerade händelsehanterare behöver vi titta närmare på de möjliga inparametrar som hanteraren kan ta emot.

Hur hanteras händelser?

Man brukar säga att händelser i webbläsaren "bubblar" upp. Vad detta betyder är att en händelse först triggar igång alla händelsehanterare på det element den inträffade på, därefter bubblar händelsen vidare upp och triggar igång alla eventuella händelsehanterare som är satta på ovanför liggande element. Händelsen fortsätter att bubbla upp på detta vis ända upp i body och document. Det innebär alltså att när en händelse inträffar kan en rad händelsehanterare triggas igång. Dessa händelsehanteare kanske gör helt olika saker.

Ibland kanske man inte vill att en händelse ska bubbla vidare upp till ovanliggande element. Kanske man vill ersätta det "vanliga" beteendet med ett custom beteende och därför vill vara ensam om att hantera händelsetypen. Detta kan man åstadkomma genom att använda ett par

one

När vi har händelser som vi bara vill hantera en enda gång, kan vi använda oss av one. Denna metod fungerar precis som on, med den skillnaden att den kan inträffa maximalt en gång. Så fort den inträffat och hanterats kopplar jQuery bort händelsehanteraren.

I övrigt finns inte mycket att säga om denna metod. Allt som gäller för on gäller för denna också.

Nästa aktivitet

jQuery - AJAX