JavaScript-events en event handlers: addEventListener

Events zijn acties die de gebruiker kan uitlokken: klikken op een knop, tekst intypen in een formulier, enzovoort. In JavaScript gebruiken we event handlers om code uit te voeren als reactie op die events.

Veelvoorkomende events in JavaScript

Er is een hele reeks gangbare events die je in JavaScript voortdurend tegenkomt. Een paar voorbeelden:

• click: afgevuurd wanneer de gebruiker op een element klikt
• mouseover: afgevuurd wanneer de gebruiker met de muis over een element gaat
• submit: afgevuurd wanneer de gebruiker een formulier verstuurt
• focus: afgevuurd wanneer de gebruiker een element de focus geeft (bijvoorbeeld door in een formulierveld te klikken)

Er kunnen nog veel meer events afgaan terwijl de gebruiker met de pagina bezig is, zoals “change”, “keyup”, “keydown” enzovoort. Een vollediger lijst met events vind je hier: https://www.gekkode.com/developpement/comprendre-et-travailler-avec-les-evenements-en-javascript/

Een event handler aan een element koppelen

Er zijn verschillende manieren om een event handler aan een DOM-element te hangen. De eerste is de eigenschap op het element zelf gebruiken. Bijvoorbeeld om een klikhandler aan een knop te koppelen:

const button = document.querySelector('button');
button.onclick = function() {
    console.log('Bouton cliqué');
}

Je kunt ook de methode addEventListener gebruiken, waarmee je meerdere handlers aan hetzelfde element kunt hangen:

const input = document.querySelector('input');
input.addEventListener('focus', function() {
    console.log('Input focus');
});
input.addEventListener('blur', function() {
    console.log('Input blur');
});

En er is de methode removeEventListener om een handler weer van een element te halen:

// onze anonieme functie
const maFonctionAnonyme = function() {
    console.log("Le bouton a été cliqué");
}

// We koppelen ons event
document.getElementById('monBouton')
    .addEventListener('click', maFonctionAnonyme);

// Later in de code halen we dit event er om de een of andere reden weer af
document.getElementById('monBouton')
    .removeEventListener('click', maFonctionAnonyme);

In dit voorbeeld wordt de event handler “click” die aan de functie “maFonctionAnonyme” hangt van de knop losgekoppeld.

Conclusie

Met gebeurtenissen en event handlers creëer je realtime interacties op je website en maak je ze dynamischer en aangenamer in gebruik. Het volgende hoofdstuk behandelt modules en import/export (ES6), die de code opsplitsen in bestanden, klassen worden uitgewerkt in het artikel over klassen in JavaScript.