Events & Listeners

Wat zijn events?

Een event is iets wat er in de browser gebeurt — een klik, een toetsaanslag, het laden van een pagina, het invullen van een formulier. Met JavaScript kun je op die events reageren.

addEventListener

addEventListener koppelt een functie aan een event op een element. Die functie wordt uitgevoerd zodra het event plaatsvindt.

<button id="mijnKnop">Klik mij</button>

const knop = document.querySelector('#mijnKnop');

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

// Of met een arrow function:
knop.addEventListener('click', () => {
  console.log('De knop is geklikt!');
});

Benoemde functie als handler

function handleKlik() {
  console.log('Geklikt!');
}

const knop = document.querySelector('#mijnKnop');
knop.addEventListener('click', handleKlik);

// Event listener verwijderen:
knop.removeEventListener('click', handleKlik);

knop.addEventListener('click', handleKlik);   // Goed
knop.addEventListener('click', handleKlik()); // Fout — roept direct aan!

Het event object

Elke event handler ontvangt automatisch een event object met informatie over wat er is gebeurd.

const knop = document.querySelector('#mijnKnop');

knop.addEventListener('click', (event) => {
  console.log(event);          // het volledige event object
  console.log(event.type);     // "click"
  console.log(event.target);   // het element waarop geklikt is
});

event.target

document.addEventListener('click', (e) => {
  console.log(e.target);          // het aangeklikte element
  console.log(e.target.id);       // het id-attribuut
  console.log(e.target.textContent); // de tekst erin
});

Click events

Eén knop

<button id="telKnop">Teller: 0</button>

let teller = 0;
const knop = document.querySelector('#telKnop');

knop.addEventListener('click', () => {
  teller++;
  knop.textContent = `Teller: ${teller}`;
});

Meerdere knoppen — event delegation

<div id="menu">
  <button data-actie="opslaan">Opslaan</button>
  <button data-actie="verwijderen">Verwijderen</button>
  <button data-actie="annuleren">Annuleren</button>
</div>

const menu = document.querySelector('#menu');

menu.addEventListener('click', (e) => {
  const actie = e.target.dataset.actie;

  if (!actie) return; // klik niet op een knop

  if (actie === 'opslaan') console.log('Opgeslagen!');
  if (actie === 'verwijderen') console.log('Verwijderd!');
  if (actie === 'annuleren') console.log('Geannuleerd!');
});

Input events

Met het input event reageer je op elke toetsaanslag in een invoerveld — in realtime.

<input type="text" id="zoekVeld" placeholder="Zoek...">
<p id="resultaat"></p>

const zoekVeld = document.querySelector('#zoekVeld');
const resultaat = document.querySelector('#resultaat');

zoekVeld.addEventListener('input', (e) => {
  const zoekterm = e.target.value;
  resultaat.textContent = `Je zoekt naar: ${zoekterm}`;
});

change vs input

Live zoekfilter

const namen = ['Anna', 'Bob', 'Carol', 'David', 'Emma'];
const zoekVeld = document.querySelector('#zoekVeld');
const lijst = document.querySelector('#namenlijst');

zoekVeld.addEventListener('input', (e) => {
  const zoekterm = e.target.value.toLowerCase();

  const gefilterd = namen.filter(naam =>
    naam.toLowerCase().includes(zoekterm)
  );

  lijst.innerHTML = gefilterd
    .map(naam => `
${naam}
`)
    .join('');
});

Form submit

Bij het versturen van een formulier gebruik je het submit event op het formulierelement. Gebruik altijd e.preventDefault() om te voorkomen dat de pagina herlaadt.

<form id="contactForm">
  <input type="text" id="naam" placeholder="Naam">
  <input type="email" id="email" placeholder="Email">
  <button type="submit">Verstuur</button>
</form>
<p id="feedback"></p>

const form = document.querySelector('#contactForm');
const feedback = document.querySelector('#feedback');

form.addEventListener('submit', (e) => {
  e.preventDefault(); // voorkom pagina herladen

  const naam = document.querySelector('#naam').value.trim();
  const email = document.querySelector('#email').value.trim();

  if (naam === '' || email === '') {
    feedback.textContent = 'Vul alle velden in';
    return;
  }

  feedback.textContent = `Bedankt, ${naam}! We sturen een bevestiging naar ${email}.`;
  form.reset(); // formulier leegmaken
});

Keyboard events

Met keydown en keyup reageer je op toetsaanslagen.

document.addEventListener('keydown', (e) => {
  console.log(e.key);     // "a", "Enter", "ArrowUp", etc.
  console.log(e.code);    // "KeyA", "Enter", "ArrowUp"
  console.log(e.ctrlKey); // true als Ctrl ingedrukt is
  console.log(e.shiftKey); // true als Shift ingedrukt is
});

Reageren op een specifieke toets

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    console.log('Enter ingedrukt!');
  }

  if (e.key === 'Escape') {
    sluitModal();
  }
});

Toetscombinaties

document.addEventListener('keydown', (e) => {
  // Ctrl + S → opslaan
  if (e.ctrlKey && e.key === 's') {
    e.preventDefault(); // voorkom browser opslaan
    slaOp();
  }

  // Ctrl + Z → ongedaan maken
  if (e.ctrlKey && e.key === 'z') {
    maakOngedaan();
  }
});

Event bubbling

Wanneer een event plaatsvindt op een element, "borrelt" het event omhoog door alle bovenliggende elementen. Dit heet bubbling.

<div id="buitenste">
  <div id="binnenste">
    <button id="knop">Klik</button>
  </div>
</div>

document.querySelector('#knop').addEventListener('click', () => {
  console.log('Knop geklikt');
});

document.querySelector('#binnenste').addEventListener('click', () => {
  console.log('Binnenste div geklikt');
});

document.querySelector('#buitenste').addEventListener('click', () => {
  console.log('Buitenste div geklikt');
});

// Klik op knop print:
// "Knop geklikt"
// "Binnenste div geklikt"
// "Buitenste div geklikt"

Bubbling stoppen

document.querySelector('#knop').addEventListener('click', (e) => {
  e.stopPropagation(); // stop het bubbling
  console.log('Alleen de knop');
});

Samenvatting