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.
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.
Händelser kopplas förstås bara till de element som redan existerar när vi kallar på on-metoden. Om vår kod skulle lägga till en extra knapp i sidan efter det att vi genomfört kopplingen, så kommer den nya knappen inte att bli kopplad till vår händelsehanterare. När vi lägger till objekt dynamiskt i sidan, måste vi alltså se till att vid behov koppla in de behövliga händelsehanterarna.
Namespaces
Det går att koppla flera händelser av samma typ till ett och samma element. Det gör att det kan vara svårt att hålla reda på de olika händelsehanterarna, speciellt gäller detta när vi ska ta bort dem ifrån elementet. Vi måste ju på något sätt kunna särskilja på de olika händelsehanterna, så vi enbart tar bort de som ska bort och låter övriga vara kvar. En metod för att lösa detta är "namespaces".
För att ange ett namespace för en händelse så lägger vi till en punkt och därefter namnet på vår namespace. Istället för click hade vi i vårt exempel kunnat köra något i stil med click.exempel. Detta gör det enklare att ta bort händelsen eller att trigga den specifika händelsen.
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å.
off
För att koppla ifrån en händelsehanterare ifrån ett element använder man sig av metoden off. Som inparameter tar denna en sträng. Strängen anger en eller flera metoder som ska kopplas ifrån. Om du anger flera händelser, så separeras de av mellanslag. Vi kan även hänga på namespaces efter händelsen om vi enbart vill komma åt specifika händelsehanterare.
Du kan även kalla på off utan några som helst parametrar. Då tas alla händelsehanterare bort ifrån elementet.
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. Om vi anger att vår händelsehanterare ska ta emot en inparameter kommer vi att få ett Event-objekt. Detta innehåller information om händelsen. Det möjliggör även att vi kan ändra på saker som har med händelsen att göra.
Event-objektet
jQuery skapar en ett eget event-objekt för händelser. Detta skiljer sig något ifrån hur webbläsarens egna event-objekt ser ut. Anledningen till att man skickar med en custominiserad version är att man vill normalisera händelseinformation, så att den ser likadan ut oavsett vilken webbläsare man kör på. Vi behöver alltså inte bry oss i om användaren har en "konstig" webbläsare som ställer till med några knasigheter när händelser inträffar. I de flesta fall klarar jQuery av att fixa till dessa olikheter och den tillhandahåller oss med ett event-objekt som är likformigt.
Det finns en uppsjö av information i event-objektet. Vi ska titta på några utvalda, viktiga värden. Om du vill se vad som mer är tillgängligt kan du titta på jQuerys dokumentation.
Position: pageX och pageY
Ett värde som vi kan läsa ut ifrån event-objektet är vilken position som muspekaren befann sig på när händelsen inträffade. Detta kan ju vara av intresse när vi kopplar en händelse till ett musklick. Vissa typer av händelser leverar inte denna information. I dessa fall är värdena undefined.
Vi kör ett exempel där vi informerar om vilken position som användaren klickade på.
I exemplet kopplas vår händelsehanterare till sidans body. Alla klick som utförs på denna area kommer att trigga igång en händelse. För att se till att body täcker hela sidan har vi lagt till lite extra CSS. I övrigt påminner exemplet starkt om tidigare exempel.
pageX anges som antal pixlar ifrån dokumentets högra kant. Det vill säga, inte ifrån webbläsarens kant, utan ifrån kanten på den vy som visar dokumentet. pageY anges som antal pixlar ifrån dokumentets topp. Y-axeln är omvänd mot vad vi är vana med och desto längre ned muspekaren befinner sig, desto högre blir pageY-värdet.
target
Vi kan få ut vilket element som genererade händelsen. Detta kan vara ett underobjekt till det objekt som har händelsehanteraren. I vårt klickexempel ovan, så genereas händelsen faktiskt inte alltid direkt i body, utan i vissa fall är det sidans andra element som triggar igång händelsen. Händelsen "bubblar" sedan upp till elementets föräldrar (se mer nedan om "bubbling").
Vi gör om föregående exempel lite och skriver ut vad som genererade händelsen.
Om du provkör exemplet så ser du att vi får olika objekt beroende på var vi klickar.
currentTarget
I vissa fall kanske vi vill ha reda på vilket element som händelsehanteraren är kopplad till. Kanske vi har kopplat samma händelsehanterare till flera olika element och vill kunna göra något speciellt beroende på vilket element som triggas. Detta kan vi läsa ut med currentTarget.
Dock så behöver man oftast inte använda sig av detta värde. Variabeln this är nämligen automatiskt satt till just det element på vilket händelsen inträffade.
which
Ibland behöver vi veta exakt vilken tangent eller musknapp som triggade igång en händelse. Detta kan vi läsa ut med hjälp av which.
För mushändelser kommer denna att sättas till;
- Vänstra musknappen
- Mittersta musknappen
- Högra muskappen
Om händelsen triggades igång av ett tangenttryck kommer which att innehåll teckenkoden som motsvarar den knappkombinationen som utfördes. Om det är en enda knapp som trycktes ned erhåller du det Unicode värde som motsvarar tecknet på den tangenten. Om det är ett kontrolltecken eller om det är en kombination av tangenter som tryckts ned, så blir det mer komplicerat att tolka. Se KeyboardEvent.key för en mer ingående beskrivning av hur värdet ska tolkas.
Andra värden
Det finns som sagt många fler värden som kan läsas ut. Se event-object för mer information om tillgängliga värden.
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 eventuella händelsehanterare som är angivna för element som ligger ovanför (dvs, föräldraelement till elementet som triggade händelsen). Händelsen fortsätter att bubbla upp ända upp i body och document. Detta 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 sig av några metoder som är inbyggda i event-objektet.
event.stopPropagation()
Efter det att en händelsehanterare anropar metoden event.stopPropagation() kommer händelsen att sluta bubbla vidare. Om det finns flera händelsehanterare på som är anslutna till samma element, så kan dessa triggas. Dock så kommer inte händelsehanterare på föräldraelement att triggas.
Om vi vill stoppa händelsen ifrån att nå även andra händelsehanterare på nuvarande element, måste vi använda den metod som vi beskriver under nästa rubrik.
event.stopImmediatePropagation()
Händelsen kommer inte att bubbla vidare och den kommer inte ens att nå andra händelsehanterare på nuvarande element (om de inte redan körts).
Samma sak händer faktiskt om ens händelsehanterare returnerar false. Dock är det ett gammalmodigt sätt att göra detta på. Så använd event.stopImmediatePropagation() om du vill stoppa händelsen ifrån att nå vidare.
event.preventDefault()
Om vi anropar event.preventDefault() kommer inte defaultbeteendet för elementeet att genomföras. Ett exempel på det skulle vara om vi har en händelsehanterare kopplad till a-element och vi kallar på event.preventDefault(), då skulle inte webbläsaren följa länkarna.
Mer om händelser
Det finns fler saker man kan göra med händelser. Vi har vare sig gått igenom alla tillgängliga metoder eller alla tillgängliga värden. Vill du veta mer kan du titta på jQuerys dokumentation. Dock bör ovanstående räcka till i de flesta normalfall. Så om du hängt med i denna aktivitet har du en bra grund att stå på!