Les 10: Events
Home ›JavaScript-track ›Les 10

🖱️ Events

⏱ Geschatte leestijd: 25 minuten · 7 stappen

Tot nu toe reageerde je code niet op de gebruiker. Met events maak je je pagina echt interactief: reageer op klikken, typen, scrollen en meer. addEventListener is de kern van elke interactieve webpagina.

1 addEventListener()

Wat betekent dit?

element.addEventListener(type, handler) — koppelt een luisteraar aan een element. Zodra het event plaatsvindt, roept de browser de handler-functie aan. Je kunt meerdere listeners aan hetzelfde element koppelen.

Basisstructuur
const knop = document.getElementById('mijnKnop');

knop.addEventListener('click', function() {
  console.log('Knop geklikt!');
});

// Of met een arrow function:
knop.addEventListener('click', () => {
  console.log('Knop geklikt!');
});
'click' — muisklik of tap
'input' — toets ingedrukt in veld
'submit' — formulier verzonden

2 Het event-object

De handler-functie ontvangt automatisch een event-object (vaak e of event genaamd). Het bevat informatie over wat er is gebeurd.

Het event-object
knop.addEventListener('click', (e) => {
  console.log(e.type);       // 'click'
  console.log(e.target);     // het element waarop geklikt is
  console.log(e.target.id);  // het id van dat element
});

// Handig bij meerdere knoppen:
document.querySelectorAll('button').forEach(btn => {
  btn.addEventListener('click', (e) => {
    console.log('Je klikte op: ' + e.target.textContent);
  });
});

3 Input- en change-events

Wat betekent dit?

'input' — vuurt elke keer dat de waarde verandert (iedere toetsaanslag). Gebruik dit voor live feedback.
'change' — vuurt als het veld de focus verliest én de waarde is gewijzigd. Minder events. 

const invoer = document.getElementById('tekst');

// Elke toetsaanslag:
invoer.addEventListener('input', (e) => {
  console.log('Huidige waarde: ' + e.target.value);
  console.log('Aantal tekens: ' + e.target.value.length);
});

4 event.preventDefault()

Wat betekent dit?

Sommige elementen hebben een standaard gedrag: een link navigeert, een formulier herlaadt de pagina. e.preventDefault() stopt dit standaard gedrag zodat jouw JavaScript het overneemt. 

const formulier = document.getElementById('mijnForm');

formulier.addEventListener('submit', (e) => {
  e.preventDefault(); // pagina herlaadt NIET

  const naam = document.getElementById('naam').value;
  if (naam.trim() === '') {
    console.log('Fout: naam is verplicht');
  } else {
    console.log('Formulier verzonden voor: ' + naam);
  }
});

💡 Altijd gebruiken bij formulieren die je met JavaScript verwerkt. Zonder preventDefault() herlaadt de pagina bij submit en verlies je alle JS-staat.

5 Oefening 1: Klik-teller

Opdracht:

Maak een klik-teller. Elke klik op de knop verhoogt de teller met 1. Voeg ook een Reset-knop toe die de teller terugzet op 0.

✓ addEventListener('click', ...) op de teller-knop

✓ Een variabele die de telling bijhoudt

✓ Teller-weergave wordt bijgewerkt na elke klik

✓ Reset-knop zet teller terug op 0

editor
Live preview

6 Oefening 2: Live kleur-preview

Opdracht:

Maak een kleurenkiezer. Drie <input type="color">-velden voor rood, groen en blauw. Zodra een waarde verandert, wordt de achtergrond van een #preview-div bijgewerkt met rgb(r, g, b).

✓ 'input' event op elk kleurveld

✓ element.style.backgroundColor bijwerken

✓ rgb-waarde opbouwen vanuit de 3 velden

editor
Live preview

7 Eindopdracht: Live tekenteller

Bouw een Twitter-achtige tekenteller:

✓ Textarea met max 280 tekens

✓ Live teller: "Nog X tekens over" (bijgewerkt bij elk input-event)

✓ Teller wordt rood als er minder dan 20 tekens overblijven

✓ "Wissen"-knop maakt textarea leeg en reset teller

✓ Optioneel: voorkomen dat meer dan 280 tekens ingevoerd kunnen worden

editor
Live preview
📄 Volledig voorbeeld: events.html 
<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
  <title>Events</title>
</head>
<body>
  <button id="knop">Klik mij</button>
  <p id="output"></p>
  <input id="tekst" type="text" placeholder="Typ hier...">
  <p id="live"></p>
  <form id="form">
    <input name="naam" placeholder="Naam">
    <button type="submit">Verzenden</button>
  </form>

  <script>
    let aantalKliks = 0;
    document.getElementById('knop').addEventListener('click', () => {
      aantalKliks++;
      document.getElementById('output').textContent = aantalKliks + ' keer geklikt';
    });

    document.getElementById('tekst').addEventListener('input', (e) => {
      document.getElementById('live').textContent = e.target.value;
    });

    document.getElementById('form').addEventListener('submit', (e) => {
      e.preventDefault();
      const naam = e.target.naam.value;
      alert('Hallo ' + naam);
    });
  </script>
</body>
</html>
← Les 9 Les 11 →