web2 logo

Artikel Links Notities

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

naar boven

term zoeken

Notitieruimte