Chapter 15 handling events

Event handlers

Polling: Als een program soms een queue checkt om te kijken of er input van de gebruiker is (keypress)

Handlers: het systeem laat de code weten wat de status is als een event bezig is. window: object in de browser gebouwd om het document waar je in werkt weer te geven

addEventListener: method werkt bijv met “click”

Events en DOM Nodes

Event listeners worden alleen opgeroepen als het event in de context van het opgegeven object gebeurd. Je kunt een node (HTML element) ook een onclick attribuut geven

Event Objects

Event Handler functions zijn een argument: het Event Object, dit stored extra informatie over de actie zoals: welke muisknop is er gedrukt, de informatie verschilt per soort event. Het type property bevat een string die het event identificeert zoals “click”

Propagation

handlers die op nodes met children staan krijgen ook events mee, als een button een een geklikt word zien de event handlers ook de acties van de button, als ze allebei een handler hebben mag de meest specifieke eerst (als het groeien van een plant) stopPropegation stopt dit

Default actions

events hebben vaak een default zoals het klikken van een link meestal naar een link target leidt. wil je dit niet gebruik de preventDefault method

Key Events

als je fysiek op een key klikt en deze naar beneden houd (het event repeat zich dan)

Pointer Events

Op desktop heb je een muis, mobile heeft touchscreen deze hebben andere events

Mouse Clicks

mousedown en mouse zijn bijna hetzelfde als keydown en up, gebeuren op dom nodes als e mouse er op staat. Je hebt ook click en dblclick Mouse Motion elke keer als de muis beweegt is er een mousemove event je kunt dit gebruiken om om de positie van de muis te bepalen voor een drag en drop feature bijv.

Touch Events

Zijn anders dan mouse events mousemove kan bijv niet met touch events. andere events zijn touchstart, touchmove, touched, touches (arrayachtig object met points als clientX-Y en pageX-Y)

Scroll Events

Als je scrollt komt er een scroll event op het element voor bijv off screen animaties

Focus Events

Als je gefocust (met tab) bent op een element krijgt deze een focus event daarna een blur event, ze kunnen niet propegaten (parent handler is niet notified als er een focus even gebeurd)

Load Events

Als de pagina klaar is met laden krijg je een load event