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);
