Ga naar hoofdinhoud

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?​

EventWanneer
'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 het zelf.​

Editor laden...

Investigate​

Experimenteer in het veld hierboven:

  • Vervang 'mouseover' door 'click' in de onderste regels. Wat verandert er aan het gedrag?
  • Verwijder de koppelregel van muisWeg (de onderste regel). Welke tekst blijft er staan als je de muis wegbeweegt?
  • Koppel muisErop óók aan het 'dblclick'-event. Kan één functie bij twee events horen?

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).