Events

Tot nu toe koppelde je gedrag aan een knop met onclick in de HTML. Vanaf deze les doe je dat vanuit JavaScript, met addEventListener — dan blijven HTML en gedrag gescheiden, en kun je op veel meer reageren dan alleen klikken.

Stap 1: een functie maken

Dit ken je al uit De script-tag:

function zegHoi() {
  document.getElementById('status').textContent = 'Geklikt.';
}

Stap 2: de functie aan een event koppelen

addEventListener zet een luisteraar op een element. De drie onderdelen:

document.getElementById('knop').addEventListener('click', zegHoi);

• document.getElementById('knop'): het element waarop je luistert
• 'click': de naam van het event waarop je reageert
• zegHoi: de functie die draait zodra het event plaatsvindt

De functie geef je mee zonder haakjes: je noemt zijn naam, zoals je iemand een telefoonnummer geeft. De browser "belt" hem pas bij het event.

Naamloze functies in andermans code

Op internet zie je vaak een functie zonder naam die rechtstreeks in de listener geschreven staat (addEventListener('click', function() { ... })). Dat werkt, maar in deze lessen krijgt elke functie een naam: dat leest makkelijker, en je kunt dezelfde functie dan op meer plekken gebruiken.

Welke events bestaan er?

Event	Wanneer
'click'	Muisklik op het element
'dblclick'	Dubbelklik op het element
'mouseover'	Muis komt op het element
'mouseout'	Muis verlaat het element
'keydown'	Toets wordt ingedrukt

onclick of addEventListener?

Voor één knop met één actie is onclick in de HTML prima — daarom gebruikten de vorige lessen hem. addEventListener kan meer: meerdere listeners op hetzelfde element, andere events dan klikken, en al je gedrag bij elkaar in script.js. Vanaf deze les is het de standaard.

Predict

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

Wat zie je als je de muis op de knop zet, en wat als je hem weer wegbeweegt?

Bij het raken van de knop draait muisErop (via het mouseover-event) en komt er "Muis erop." te staan; zodra de muis de knop verlaat, zet muisWeg de tekst op "Muis weg.". Twee benoemde functies, elk gekoppeld aan hun eigen event.

Probeer en onderzoek

Probeer eerst zelf, klap dan het antwoord uit.

1. Vervang 'mouseover' door 'click'. Wat verandert er aan het gedrag?
   Antwoord

   De muis op de knop zetten doet niets meer; pas als je klikt komt er Muis erop. te staan. Beweeg je de muis weg, dan staat er nog steeds Muis weg., want die regel luistert nog naar 'mouseout'.
2. Verwijder de onderste regel, de koppeling van muisWeg. Welke tekst blijft er staan als je de muis wegbeweegt?
   Antwoord

   Muis erop. blijft staan. De functie muisWeg bestaat nog, maar niets roept hem meer aan: zonder listener draait een functie nooit.
3. Zet onderaan een extra regel die muisWeg ook aan het 'dblclick'-event koppelt. Dubbelklik op de knop terwijl de muis erop staat. Wat zie je, en kan één functie bij twee events horen?
   Antwoord

   Met document.getElementById('knop').addEventListener('dblclick', muisWeg); komt er bij een dubbelklik Muis weg. te staan, terwijl de muis nog op de knop staat. Eén functie kan dus bij twee events horen: muisWeg draait nu bij 'mouseout' en bij 'dblclick'.

Editor laden...

Opdracht 1: Klik-listener erbij

Laat de bestaande listeners staan en voeg een derde toe: schrijf een functie toonKlik die "Geklikt." in de <p id="teller"> zet, en koppel hem aan het 'click'-event van de knop.

Editor laden...

Tip

Zelfde bouwplan als de twee functies die er al staan: eerst de functie, onderaan de koppelregel. Zo zie je dat één knop meerdere listeners tegelijk kan hebben.

Antwoord

Toevoeging in script.js:

function toonKlik() {
  document.getElementById('teller').textContent = 'Geklikt.';
}

document.getElementById('knop').addEventListener('click', toonKlik);

De muis-listeners blijven ook werken: elke listener reageert op zijn eigen event.

Opdracht 2: Klik-teller

Breid je klik-functie uit tot een teller: bij elke klik komt er 1 bij, en de <p id="teller"> toont "Aantal klikken: " met het aantal.

Editor laden...

Tip

Net als in Variabelen: declareer let teller = 0; buiten de functie, en verhoog hem binnenin.

Antwoord

let teller = 0;

function telKlik() {
  teller = teller + 1;
  document.getElementById('teller').textContent = 'Aantal klikken: ' + teller;
}

document.getElementById('knop').addEventListener('click', telKlik);

Opdracht 3: Speelkaart

Bouw het gedrag van de speelkaart: bij mouseover kleurt de achtergrond van de kaart goud, bij mouseout verdwijnt die kleur weer, en elke click telt mee in de <p id="teller">. Schrijf drie benoemde functies en koppel elk aan zijn event.

Editor laden...

Tip

Drie functies, drie listeners op hetzelfde element (getElementById('kaart')). De kleur zet je met style.backgroundColor uit Inline stijl; een lege string ('') haalt hem weer weg.

Antwoord

let teller = 0;

function maakActief() {
  document.getElementById('kaart').style.backgroundColor = 'gold';
}

function maakGewoon() {
  document.getElementById('kaart').style.backgroundColor = '';
}

function telKlik() {
  teller = teller + 1;
  document.getElementById('teller').textContent = 'Aantal klikken: ' + teller;
}

document.getElementById('kaart').addEventListener('mouseover', maakActief);
document.getElementById('kaart').addEventListener('mouseout', maakGewoon);
document.getElementById('kaart').addEventListener('click', telKlik);

Er gaat iets mis

Haakjes achter de functienaam

function zegHoi() {
  document.getElementById('status').textContent = 'Hoi.';
}

document.getElementById('knop').addEventListener('click', zegHoi());  // Fout

Met zegHoi() (mét haakjes) roep je de functie meteen aan, al bij het laden van de pagina. Wat je aan addEventListener meegeeft is dan de uitkomst van die aanroep — niet de functie zelf. Gevolg: de tekst verandert direct bij het laden, en bij het klikken gebeurt er niets meer.

Geef de functie door zonder haakjes: addEventListener('click', zegHoi).