Functions met parameters gebruiken in addEventListener

Om een webpagina (of delen van een webpagina) interactief te maken, moet je die pagina laten reageren op acties van de gebruiker. Denk daarbij aan muisbewegingen of -klikken, scrollen, aanrakingen, enzovoort.
Zo'n actie heeft event, of 'gebeurtenis'. Een site reageert op een event. Meestal merk je daar niets van, maar je kunt events ook aanpassen aan je eigen behoeften. Dat doe je door een event-handler te maken. Meestal is dat een stukje JavaScript, bijvoorbeeld een function. Met CSS zou het ook moeten kunnen, maar dat blijft hier buiten beschouwing.

Om aan de browser duidelijk te maken dat er een event-handler is, kun je aan een HTML-element een attribuut toevoegen, bijvoorbeeld onload=" … ", onclick=" … " of onmouseover=" … ". Tussen de aanhalingstekens staat de aanroep van een JavaScript-function.

Het kan ook direct met JavaScript, zelfs op meerdere manieren.
De oudste manier is element.on...... Bijvoorbeeld document.onclick = naam-van-de-function.
Iets jonger is de methode addEventListener(). Deze schijnt efficiënter te zijn, behalve als je veel listeners hebt. De discussie hierover lijkt mij nogal oeverloos, dus daar bemoeien we ons niet mee. Het enige dat telt is dat het moet werken.

De syntax van addEventListener() is:

• Voor window: window.addEventListener('event',function).
  Hierin is event de naam van een window-event, bijvoorbeeld load of beforeunload. Deze naam moet tussen (enkele of dubbele) aanhalingstekens staan.
  function is de naam van de function die wordt uitgevoerd als event optreedt. Die naam staat niet tussen aanhalingstekens.
• Voor document: document.addEventListener('event',function).
  Hierin is event de naam van een document-event, bijvoorbeeld click of untouchstart. Deze naam moet tussen (enkele of dubbele) aanhalingstekens staan.
  function is de naam van de function die wordt uitgevoerd als event optreedt. Die naam staat niet tussen aanhalingstekens.
  Als je een eventListener wilt maken voor een enkel element, geef je dat element een id en gebruik je:
  document.getElementById('...').addEventListener('event',function).

Zowel on.... als addElementListener() heeft een probleem: Je kunt geen parameters meegeven aan de function. Bij addEventListener() kun je daar omheen. Dat gaat met eenanonieme function. bijvoorbeeld:
document.addElementListener('click',
    function abcd() { mijnFunctie(xx,2,4) }
Je kunt zowel waarden als variabelen mee geven als parameter.