Ben's Hobbyhoekje -- Een event-handler maken met AddEventListener

Een event-handler maken met AddEventListener

Bij het maken van een webdocument heb je te maken met drie zaken: Structuur (HTML), opmaak (CSS) en gedrag (JavaScript). Het een trend om deze drie zoveel mogelijk (zo niet volledig) van elkaar te scheiden.

De scheiding tussen structuur, opmaak en gedrag is niet altijd even duidelijk. Structuur en gedrag kunnen mede worden bepaald door de combinatie HTML, CSS en JavaScript. Dat zie je bij Responsive websites. Afhankelijk van de schermbreedte wordt de structuur van het document bepaald door CSS en JavaScript. Het gedrag van een mobiele website verschilt gewoonlijk van een desktop-versie van die site. Behalve HTML, CSS en JavaScript speelt de hardware dus ook nog een belangrijke rol.

De scheiding tussen structuur, opmaak en gedrag houdt onder meer in dat een HTML-tag geen attributen mag bevatten voor het starten van een JavaScript. In de praktijk betekent dat dat je geen event-handlers in een HTML-tag zou mogen opnemen.

De tag: <body onload="doeIets()"> is in deze benadering dus niet toegestaan.

Als je dan geen event-handlers meer zou mogen starten vanuit een tag, rijst onmiddellijk de vraag hoe je dat dan wel zou moeten doen. Hiervoor bestaat sinds langere tijd een standaard functie in JavaScript: AddEventListener().

De function AddEventListener heeft drie parameters:
1. Het event dat moet worden afgevangen.
2. De function die moet wordt uitgevoerd als het event optreedt.
3. UseCapture. Hiermee wordt aangegeven wanneer de event-handler moet worden uitgevoerd. Dit is true (uitvoeren in de Capture-fase) of false (uitvoeren in de Bubble-fase).
  In de praktijk zet je dit altijd op false, zodat het event kan bubbelen. Zie het item Over Event-bubbling.
Event-Capturing is eigenlijk bubbling in omgekeerde richting, dus vanuit de root van het document tot het element waar het event zich voordeed. Het voert te ver om dit uitgebreid te bespreken. Het wordt nl. alleen in speciale gevallen gebruikt.
De code om "onload=" te vervangen luidt:
window.addEventListener('load', DoeIets(), false)
Je kunt DoeIets() ook vervangen door een anonieme functie:
window.addEventListener('load', function() { … … }, false)
De code om een klik op een knop af te vangen is (stel dat de knop id="Knop_1" heeft):
document.getElementById('Knop_1').addEventListener('click', DoeIets(), false),
of
document.getElementById('Knop_1').addEventListener('click', function() { … … }, false)

Welke aanpak is de beste?
Er zijn dus twee mogelijkheden om een event-handler te maken: met een attribuut in een tag of met de function addEvenListener().
Beide methodes zijn gedefinieerd in de HTML- en JavaScript-standaarden. In de praktijk betekent het dat je vrij bent om te kiezen. Het hangt dus af van je eigen voorkeur. Wees daarbij wel consequent, anders wordt je code juist minder goed leesbaar.
Zelf kies ik ervoor om een attribuut in een tag te zetten. Bij het lezen van de code zie je meteen welke events worden afgevangen en welke functions daarvoor worden aangeroepen. Dat is duidelijker.