Reageren op acties van gebruikers

Acties van gebruikers leveren Events op in javascript, op deze events kan gereageerd worden.

Toetsenbord

keydown komt als er een toets wordt ingedrukt, herhaalt als de toets ingedrukt blijft
keypress komt als er een karakter wordt ingevoerd, herhaalt als de toets ingedrukt blijft
keyup komt als een toets wordt losgelaten (en het karakter op het scherm staat)

Muis

click komt als de primaire muisknop ingedrukt wordt en weer losgelaten wordt boven een element, dit event komt ook als de Enter toets gebruikt wordt terwijl het element focus heeft, of als er getikt wordt op het element in een aanraakscherm
dbclick komt als de primaire muisknop tweemaal snel achter elkaar ingedrukt wordt en weer losgelaten wordt boven een element, tweemaal snel tikken op een element in een aanraakscherm doet hetzelfde
mousedown komt als een muisknop wordt ingedrukt boven een element
mousemove komt als de muis verplaatst wordt, dit event repeteert zolang de muis verplaatst wordt
mouseover komt als de muis verplaatst wordt boven een element
mouseout komt als de muis een element verlaat
mouseup komt als een muisknop wordt losgelaten boven een element

Aanraakscherm

touchstart element wordt aangeraakt
touchend element wordt losgelaten
touchmove element wordt verschoven
touchcancel aanraking wordt onderbroken
orientationchange het scherm wordt gedraaid

Focus

blur komt als een element de focus verliest (flow: capture)
focus komt als een element de focus krijgt (flow: capture)
focusin komt als een element de focus krijgt (flow: capture en bubble)
focusout komt als een element de focus verliest (flow: capture en bubble)

Formulieren

change komt als de waarde in een selectie box, checkbox of radio knop verandert
copy komt als inhoud van een veld wordt gekopieerd
cut komt als inhoud van een veld wordt geknipt
input komt als de inhoud van een editbaar veld zoals input of textarea verandert
paste komt als er inhoud geplakt wordt in een veld
reset komt als er op een reset knop geklikt wordt
select komt als er tekst in een veld geselecteerd wordt
submit komt als het formulier ingediend wordt met een knop of toets

Interface

Deze events werken met het window-object ipv het document object.
beforeunload de webpagina staat op het punt gesloten te worden, maar dit is nog af te breken
error de browser komt een fout tegen, de uitwerking van dit event verschilt per browser
hashchange komt als het window object een andere URL krijgt achter de hash (#), het event object zal dan oldURL en newURL als eigenschappen hebben
load de webpagina is klaar met laden
resize de grootte het browservenster is aangepast, dit event repeteert zolang het venster wordt aangepast
scroll de gebruiker heeft gescrolld, dit event repeteert zolang er gescrolld wordt, het kan de webpagina zijn die gescrolld wordt, maar ook een element op de webpagina, zoals een textarea
unload de webpagina wordt gesloten

DOM mutaties

DOMContentLoaded komt als de DOM tree is gevormd, onderdelen zoals plaatjes en scripts hoeven dan nog niet geladen te zijn
DOMNodeInserted een node is toegevoegd als kind van een andere node
DOMNodeInsertedIntoDocument een node is toegevoegd als afstammeling van een andere node
DOMNodeRemoved een node is verwijderd van een andere node
DOMNodeRemovedFromDocument een node is verwijderd als afstammeling van een andere node
DOMSubtreeModified er is iets aangepast in het document

Events koppelen aan acties

Om een event te koppelen aan een actie kan je een eventListener gebuiken:
element.addEventlistener('event',functie [, Boolean]);
Als element neem je het element waar op gereageerd moet worden, dit kan ook een container element zijn zodat je geen eventListeners op alle kinderen hoeft te zetten.
Als event neem je het event waar op gereageerd moet worden.
Als functie neem je de functie die uitgevoerd moet worden als het event plaatsvindt.
Als Boolean kan je meestal false invullen (true = capturing phase, false = bubbling phase).

Voorbeeld:
function controleerPostcode(){ // code om de postcode te controleren } var elementPostcode = document.getElementById('postcode'); elementPostcode.addEventlistener('blur',controleerPostcode, false);

Als je een functie noemt bij addEventListener, dan staan daar geen haakjes bij omdat de functie niet meteen bij het laden van de pagina uitgevoerd moet worden. Er kunnen geen parameters worden meegegeven aan een benoemde functie in een addEventlistener. Dat kan wel als je de benoemde functie in een een anonieme functie stopt:
function controleerPostcode(land){ // code om de postcode te controleren } var elementPostcode = document.getElementById('postcode'); elementPostcode.addEventlistener('blur',function() { controleerPostcode('nl'); }, false); Achter function van de anonieme functie staan wel haakjes. Anonieme functies worden bij het laden van de pagina niet automatisch uitgevoerd, dus ook niet de benoemde functie die in deze anonieme functie staat.

Als je een eventListener weer wil verwijderen, dan kan je removeEventListener gebuiken met dezelfde parameters.

Het event object doorgeven aan de functie

Als er een event plaatsvindt, heeft het event object informatie over dat event:
Algemene eigenschappen:
target het doel element van het event, het event kan op een element staan dat kind elementen bevat, het doel kan dan een kind element zijn
type het type event
cancelable of van het default gedrag van het event afgeweken kan worden

Cursor positie eigenschappen (linksboven is (0,0) ):
screenX X-postie op het scherm in pixels
screenY Y-positie op het scherm in pixels
pageX X-positie op de webpagina in pixels
pageY Y-positie op de webpagina in pixels
clientX X-positie in het browservenster in pixels
clienty Y-positie in het browservenster in pixels

Toetsenbord eigenschappen:
keyCode de ASCII code voor de kleine letter die hoort bij de toets die werd ingedrukt

Methoden:
preventDefault() afwijken van het default gedrag van het event, hiermee kan voorkomen worden dat bij het klikken op een link of het indienen van een formulier naar een andere webpagina wordt gegaan
stoppropagation() stopt het doorlopen van het event naar ouder elementen

Het event doorgeven via een benoemde functie:
function controleerPostcode(ev){ var doel = ev.target; // code om de postcode te controleren } var elementPostcode = document.getElementById('postcode'); elementPostcode.addEventlistener('blur',controleerPostcode, false);

Het event doorgeven via een anonieme functie:
function controleerPostcode(ev,land){ var doel = ev.target; // code om de postcode te controleren } var elementPostcode = document.getElementById('postcode'); elementPostcode.addEventlistener('blur',function(ev) { controleerPostcode(ev,'nl'); }, false);

Toegevoegd door: Kees de Keijzer
Twitter: @kdkq