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 komponenterna som krävs för att kunna skapa interaktiva webbapplikationer!
on
Den mest använda metoden för att koppla sig till händelser med hjälp av jQuery är on. Med denna kan man koppla sig till i stort sett alla 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.
Det första vi gör är att söka reda på vårt button-element. Därefter kör vi metoden on på detta för att koppla en händelse till knappen. Den första inparametern anger vilken händelsetyp vi vill koppla oss till. Händelsetypen click 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. Nästa parameter är den funktion som vi vill ska köras när händelsen inträffar.
Eftersom vi kommer att ändra på span ofta, så letar vi på den en gång för alla och spar undan en referens till elementet i $span. Detta är en bra vana att ha, 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.
I själva funktionen gör vi inget superspeciellt. Vi bara ökar antalet gånger som användaren tryckt på knappen.
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