JavaScript — Introduktion genom exempel

3.1 Event-objektet

Då en händelse inträffar, t.ex. användaren klickar på ett element som har en händelsehanterare kopplad till sig, skapas ett event-objekt för händelsen. Detta innehåller information om händelsen, som kan avläsas som olika egenskaper. Det finns också ett antal metoder (funktioner) i event-objektet. Det är olika innehåll i event-objektet beroende på vilken typ av händelse det är. Exemplet är uppdelat i tre delar:

1. Översikt av event-objektet samt egenskaper för att avgöra vilket element som hör till händelsen.
2. Event propagation — hur händelsen fortskrider genom flera element och hur det kan fångas upp.
3. Hantering då element även har standardhändelser och hur man kan förhindra dem.

Sammanfattning

• I den funktion som är kopplad till en händelse, dvs den funktion som angetts i addEventListener, kan man lägga in en parameter, för att få tillgång till event-objektet. Parametern kan man kalla vad man vill, men det är vanligt att kalla den e eller evt, t.ex. function something(e) {...}
• I funktionen kan man avläsa egenskaperna genom att punktnotation, t.ex. e.egenskap
• Om elementet a har ett underelement b (<a><b>...</b></a>) och en händelsehanterare kopplas till elementet a, kan man i funktionen få fram en referens till a med e.currentTarget. Detta är alltså detsamma som this, vilket visats i tidigare exempel. Med e.target får man däremot en referens till det element som användaren interagerat med. Om det t.ex. är en klickhändelse och användaren klickar på b, är e.target elementet b. Klickar användaren på a, är e.target elementet a. Medan e.currentTarget och this är elementet a i båda fallen.
• Händelser fångas normalt upp i en s.k. bubbling phase, där händelsen går uppåt i HTML-strukturen. De element som har en händelsehanterare för händelsen, fångar då upp händelsen. Man kan också fånga upp händelsen tidigare i en s.k. capturing phase, om man i addEventListener lägger in true som en tredje parameter.
• En händelsehanterare som fångat upp en händelse, kan stoppa den från att gå vidare med e.stopPropagation().
• Om ett element har en standardhändelse (default event), kan den hindras med e.preventDefault().

Egna övningar

Här följer ett förslag på några egna övningar. Öppna filen test.html och test.js och utför följande:

• Programmet är i stort sett detsamma som i script-b.js, men den sista parameter i addEventListener är ett frågetecken. Lägg istället in true eller false samt lägg in stopPropagation() i de funktioner där det behövs, så att följande gäller:
  • Oavsett vilket av de tre elementen i måltavlan som man klickar på, ska du först fånga upp klicket i div-elementet.
  • Om man klickar i p- eller span-elementet, ska du fånga upp händelsen för det element man klickade på och stoppa, så att händelsen inte går vidare. Du ska alltså endast fånga upp händelsen i antingen p- eller span-elementet.