Event (15 min)

💡 Introduktion till ämnet (flipped classroom)

⏰ Tidsåtgång: c.a. 15 min

Event (4 min)

Sätta ihop koncepten (11 min)

📖 Läsanvisningar

• JavaScript - The Definitive Guide: Hela avsnitt 15.2 Events

🏋️ Övningsuppgifter

• Events | w3schools

💬 Kodexempel

Tips! Skriv ut vad som händer i koden med hjälp av t.ex. console.log:

const btn = document.querySelector('#myButton');
btn.addEventListener('click', handleButtonClick);
function handleButtonClick() {
  console.log('klick på knappen myButton');
  // … resten av koden
}

Det går bra att skriva anonyma funktioner, t.ex. såhär:

const donut1 = document.querySelector('#donut1');
donut1.addEventListener('click', () => {
  donut1.querySelector('.slideshow').querySelector('#arrow-left').addEventListener('click', () => {
    document.querySelector('#donut1 #slideshow').changeImage();
  });
});

Problemet med s.k. anonyma funktioner är att:

1. Det blir svårare att läsa koden, för att funktionerna saknar beskrivande namn.
2. Du kan inte återanvända samma funktion för flera element/event (för den har inget namn), så du måste skapa en ny anonym funktion.
3. Det blir lätt s.k. spaghetti-kod med en funktion i en funktion i en funktion i en funktion.

Vi återkomemr till detta i avsnittet om loopar och kod-optimering senare i modulerna.

✅ Avstämning

Använd denna lista för att "checka av" att du förstår modulens koncept.

Terminologi

• event type(s)/categories
• event target
• event handler (funktion)
• event listener (typ av event)
• event object (och vad det innehåller)

Du är klar när…

• Du vet hur du skapar en event listener för t.ex. tangentbords-, klick- och touchevent
• Du kan inspektera event-objektet i t.ex. konsolen
• Du kan förhindra "default action" med hjälp av preventDefault()
• ⭐ Bonus/överkurs: du vet hur du skapar egna "custom event"

📚 Resurser

• Inget just nu

Våga Fråga-lådan

Anonyma frågelådan

Klar?