Les 6 – Events

Wat ga je leren?

Je leert hoe je met addEventListener reageert op gebruikersacties zoals muisbewegingen en klikken — en waarom dat krachtiger is dan onclick in de HTML.

Theorie

In de vorige lessen gebruikte je onclick direct in de HTML. Een krachtigere manier is addEventListener in JavaScript — zo houd je HTML en gedrag gescheiden:

document.getElementById('knop').addEventListener('click', function() {
  alert('Geklikt!');
});

Je kunt luisteren naar allerlei events:

Event	Wanneer
'click'	Muisklik op het element
'mouseover'	Muis beweegt over het element
'mouseout'	Muis verlaat het element
'keydown'	Toets wordt ingedrukt

Predict

Bekijk de startcode in het script.js-tabblad. Beantwoord de vraag hieronder voordat je op Run klikt.

Wat zie je als je je muis op de knop zet — en wat als je de muis wegbeweegt?

Als de muis de knop raakt, verandert de tekst in de <p> naar "Muis erop!" via het mouseover-event. Zodra de muis de knop verlaat, verandert de tekst naar "Muis weg." via het mouseout-event. Er zijn twee aparte listeners die elk op hun eigen event reageren.

Probeer het zelf!

Editor laden...

Investigate

Experimenteer:

• Vervang 'mouseover' door 'click' — wat verandert er?
• Voeg een derde addEventListener toe voor 'mouseout' die de tekst rood kleurt
• Wat is het verschil tussen onclick="..." in HTML en addEventListener in JavaScript?

Modify

Opdracht: Voeg een 'click' event toe dat een teller bijhoudt en toont hoe vaak er is geklikt.

Tip

Declareer een variabele let teller = 0; buiten de event listener. Verhoog die elke klik met teller = teller + 1 en toon de waarde in de <p>.

Antwoord

let teller = 0;

document.getElementById('knop').addEventListener('click', function() {
  teller = teller + 1;
  document.getElementById('status').textContent = 'Aantal klikken: ' + teller;
});

Make

Opdracht: Bouw een interactieve kleurenknop. Als de muis over de knop beweegt, verandert de achtergrondkleur van de knop. Als de muis de knop verlaat, gaat de kleur terug. Bij een klik verandert de knoptekst naar "Geklikt!" en telt een klik-teller op in een <p> eronder.

Tip

Gebruik event.target of document.getElementById om de knop zelf te stijlen. Je hebt drie listeners nodig: mouseover, mouseout en click.

Antwoord

HTML:

<button id="knop">Beweeg of klik!</button>
<p id="status">Nog niet geklikt.</p>

script.js:

let teller = 0;
const knop = document.getElementById('knop');

knop.addEventListener('mouseover', function() {
  knop.style.backgroundColor = '#4a90e2';
  knop.style.color = 'white';
});

knop.addEventListener('mouseout', function() {
  knop.style.backgroundColor = '';
  knop.style.color = '';
});

knop.addEventListener('click', function() {
  teller = teller + 1;
  knop.textContent = 'Geklikt!';
  document.getElementById('status').textContent = 'Aantal klikken: ' + teller;
});

Er gaat iets mis

addEventListener vs inline onclick — wanneer gebruik je welke?

<!-- inline onclick: eenvoudig, maar HTML en gedrag zijn vermengd -->
<button onclick="verander()">Klik</button>

// addEventListener: JavaScript en HTML blijven gescheiden
document.getElementById('knop').addEventListener('click', verander);

Met addEventListener kun je ook meerdere listeners aan hetzelfde element koppelen — dat kan niet met onclick, want die overschrijft de vorige. Voor kleine oefeningen is onclick prima; voor grotere projecten is addEventListener de betere keuze.

---

← Les 5 – Variabelen