4. Gebeurtenissen

4. Gebeurtenissen

Een event handler is een commando dat reageert bij een bepaalde gebeurtenis (event) die de gebruiker uitvoert, activeert (trigger), zoals:

Actieeventmogelijke elementen
klikken op een elementclickbutton, checkbox, HTML-tags
een veld activeren, erin klikkenfocustekstveld
een veld verlatenblurtekstveld
een veld wijzigen en verlatenchangetekstveld
muiswijzer gaat over elementmouseoveralle
muiswijzer verlaat elementmouseoutalle
gebruiker drukt op een toetskeydown, keypresstekstveld, HTML-tags
gebruiker laat een toets loskeyuptekstveld, HTML-tags
de pagina wordt geladenloadbody

4.1. Traditionele gebeurtenisafhandeling

Het was Netscape 2 die als eerste browser Javascript ondersteunde en daarmee in feite de traditionele manier van event handling vastlegde en ervoor zorgde dat alle andere browsers deze methode overnamen.
Een voorbeeld: <a href="pagina.html" onclick="alert('Je klikte op de link!');">klik hier</a>

Bij vele HTML-tags kan je een event handler als optie toevoegen, zoals:

onblur=uit te voeren nadat gebruiker het element verliet
onchange=uit te voeren nadat gebruiker het element aanpaste
onclick=uit te voeren nadat gebruiker klikte op het element
ondblclick=uit te voeren nadat gebruiker dubbelklikte op het element
onfocus=uit te voeren als gebruiker het element actief gemaakt heeft
onkeydown=uit te voeren als gebruiker op een toets drukt
onkeyup=uit te voeren als gebruiker een toets loslaat
onload=uit te voeren nadat de pagina volledig geladen is
onmousemove=uit te voeren bij bewegen van de muis
onmouseover= uit te voeren als de muis over een object beweegt
onmouseout=uit te voeren nadat de muis het object verliet
onselect=uit te voeren als gebruiker inhoud van een pagina selecteerde
onsubmit=uit te voeren bij versturen van een formulier
onunload=uit te voeren als gebruiker de pagina verlaat

Bestudeer bv. de broncode van onze primitieve rekenmachine.

Het nadeel van deze manier van werken is dat het oproepen van de event handling altijd in de HTML-code toegevoegd moet worden.
Het grote voordeel ervan is dat ze in alle browsers hetzelfde werkt.

4.2. W3C Event Registration model

De introductie van een manier om event handling volledig binnen een script te houden, gebeurde op een moment dat de "browserwar" tussen Netscape en Internet Explorer op volle hevigheid woedde. Zodoende brachten beide concurrenten modellen uit die volledig incompatibel waren – en nog steeds zijn.

Enige tijd later trachtte W3C een einde te maken aan de onhandige incompatibele modellen door een eigen model op de markt te brengen. Het is deels gebaseerd op het Netscapemodel, maar algemener. Bovendien voegde het heel wat nieuwe functionaliteit toe en loste het verscheidene problemen op van de oudere modellen.

De sleutel tot W3C's DOM Level 2 Event Specification is de methode addEventListener().
Ze heeft 3 argumenten: het type gebeurtenis, de functienaam en true of false om te bepalen of de handler in actie moet komen in fase "capturing" (true) of "bubbling" (false, default) bijvoorbeeld:
element.addEventListener('click',doSomething,false);

Capturing en bubbling zijn enkel van belang als je zowel een event uitvoert op een algemener element als op een kindelement binnen dat algemenere.

Je kan ook meer event listeners toevoegen aan hetzelfde element, maar je hebt geen controle over de volgorde waarin ze uitgevoerd worden.

Om een event handler terug te verwijderen gebruik je: element.removeEventListener('click',doSomething,false);

Je kan ook anonieme functies inbouwen:
element.addEventListener('click',function () {
  this.style.backgroundColor = '#CC0000';
},false);

Klik hier voor een voorbeeld. Of altijd leuk: een slideshow

Helaas, het bestaan van drie verschillende modellen heeft ervoor gezorgd dat event handling niet op dezelfde manier gebeurt in alle browsers, iets waar je in elk script rekening mee zal moeten houden.
Op http://www.quirksmode.org/dom/events/index.html vind je bv. een overzicht van welke browsers welke events kunnen opvangen. Niet simpel ...
In elk geval, in de nieuwste browsers van FF en IE werkt het W3C-model min of meer fatsoenlijk.

4.3. Het event object

Een functie die een gebeurtenis afhandelt is een event handler en die kan je toewijzen aan een DOM-knooppunt, de event handler registreren heet dat.

Bekijk de broncode van testEvent.html.

In een event handler verwijst this altijd naar het DOM-element waarop/waarin de actie, gebeurtenis, event plaatshad.
Enkele veelgebruikte event-eigenschappen:

EigenschapOmschrijving
altKeyAlt was ingedrukt toen de gebeurtenis optrad, the event fired
clientXX-positie van de muiscursor in het actieve element
clientYY-positie van de muiscursor in het actieve element
ctrlKeyCtrl was ingedrukt toen de gebeurtenis optrad
keyCodeASCII-code van ingedrukte toets bij een keyboard event
screenXX-positie van de muiscursor op het scherm
screenYY-positie van de muiscursor op het scherm
shiftKeyShift was ingedrukt toen de gebeurtenis optrad
typede naam van de gebeurtenis die optrad (zonder "on-")