JAVASCRIPT Tutorial

addEventListener i JS

Introduktion

"addEventListener" är en metod i JavaScript som låter dig koppla en lyssnare till ett HTML-element för att utföra vissa åtgärder när en viss händelse inträffar.

Viktiga begrepp

  • addEventListener: Metod som kopplar en lyssnare till ett element.
  • Händelsetyp: Typen av händelse att lyssna på, t.ex. "click" eller "mouseover".
  • Callback-funktion: Funktionen som ska köras när händelsen inträffar.
  • HTML-element: Elementet som ska lyssna efter händelser.

Praktiska steg

  1. Skapa en referens till HTML-elementet du vill lyssna på.
  2. Använd "addEventListener" med följande syntax:
element.addEventListener(händelsetyp, callback-funktion);

Exempel

Låt oss koppla en "click"-lyssnare till en knapp för att visa ett meddelande:

document.getElementById("knapp").addEventListener("click", function() {
  alert("Klick!");
});

Tips för tillgänglighet

  • För tangentbordsanvändare, se till att evenemang för tangenttryckningar (t.ex. "keydown") fångas upp.
  • Använd ljud- eller haptisk feedback för att indikera att en händelse har inträffat.
  • Ge visuell återkoppling, t.ex. genom att ändra utseendet på elementet vid hover eller klick.