Event-hantering

Koncept att känna till:

• Event Listener: Lyssnar efter händelser som sker på en webbsida.
• addEventListener: Anger vilken händelse som ska lyssnas efter.
• removeEventListener: Tar bort event listener.
• Event Object: Innehåller information om den utlösta händelsen.
• target: Elementet som utlöste händelsen.
• type: Namnet på händelsen.
• preventDefault: Förhindrar standardbeteendet för händelsen.
• stopPropagation: Stoppar händelsen från att bubbla upp till överordnade element.

Steg:

1. Identifiera elementet som händelsen ska lyssnas efter på.
2. Bestäm vilken händelse som ska lyssnas efter (t.ex. "klick", "mousenter").
3. Skapa en event listener med addEventListener().
4. Definiera en händelsehanterare som ska köras när händelsen inträffar.
5. Eventuella begränsningar kan läggas till med preventDefault() och stopPropagation().
6. Ta bort event listener med removeEventListener() när det inte längre behövs.

JavaScript-exempel:

const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  alert("Knapptryck detekterat!");
});

Anpassning för tillgänglighet:

• Använd aria-attribut för att ange händelsehanterare för användare av hjälpmedel.
• Ge ett alternativt sätt att interagera med elementet om event listener inte fungerar.
• Använd tydliga och koncisa händelsehanterare som enkelt kan förstås av alla användare.