Basiswerk met het Event object in JavaScript
In deze les bestuderen we de basisprincipes van het werken
met het object Event. Dit object bevat
informatie over de gebeurde gebeurtenis.
Bijvoorbeeld, als er op een element is geklikt,
kunnen we de coördinaten van die klik achterhalen, of
de toets Ctrl, Alt
of Shift op het moment van klikken was ingedrukt, enzovoort.
Laten we eens kijken hoe we het object Event kunnen verkrijgen.
Stel dat we een knop hebben:
<button id="elem">text</button>
Stel dat er bij een klik op deze knop een bepaalde functie wordt uitgevoerd:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function() {
});
Binnen de gebonden functie bevindt zich al een object
Event - we weten alleen nog niet
hoe we het kunnen verkrijgen. Het wordt als volgt
verkregen: bij het declareren van onze functie
moet je er een variabele als parameter aan doorgeven
(meestal event - maar de naam
kan elke zijn) en in deze variabele zal de browser
automatisch het object Event plaatsen:
elem.addEventListener('click', function(event) {
console.log(event); // we zullen het object met de gebeurtenis zien
});
Doe de beschreven handelingen zelfstandig en geef het object met de gebeurtenis weer in de console. Bestudeer de structuur van dit object.
