Handling Events - TristanVarewijck/Block-Tech GitHub Wiki

Events Handlers

Een addeventhandler is een manier waarop iets kan reageren als je bijvoorbeeld 'klikt' op een button dan reageert hij hierop deze button heeft een addEventHandler van 'click'

Wanneer de button geen 'click' had als addEventListener dan zou de function van deze button niet werken.

Event Objects

Wanneer we een function hebben met een addEventListener met een if statement erin, dan wordt er naast de addEventListener een object geplaatst 'event' met de 'event' object kan je extra informatie zien van de addEvenListener je kan hiermee bijvoorbeeld zien op welke knop van de muis word gedrukt. Door een if statement te maken die dat checked.

Default actions

Sommige elementen hebben een default 'purpose' <a> tags leiden je automatische door naar een externe pagina, Wanneer je op de beneden knop drukt dan scrolt je browser naar beneden. Deze 'default actions' kan je uitschakelen met het 'event' object door er een 'method' aan de plakken namelijk: event.preventDefault(). Doe dit niet wanneer je er geen goede rede voor hebt mensen gaan zich hier namelijk aan irriteren.

Pointer Events

Mouse Clicks

Deze veel voorkomende event komt in actie wanneer er met de muis word geklikt dit een enkele klik ('click') zijn maar meerdere kliks ('dblclick')

Mouse Motion

Elke keer wanneer de muis beweegt activeert dit de 'mousemove' event een goede manier om dit te gebruiken kan zijn wanneer je wilt bepalen waar de muis zich bevindt.

Touch Event

Nu in deze nieuwe tijd is er een 'touch' event toegevoegd die wordt geactiveerd wanneer er bijvoorbeeld word geklikt met een vinger op je iPhone scherm.

Scroll Event

Deze event wordt geactiveerd wanneer je met de muis naar boven of naar beneden scrolt, Een manier om dit te gebruiken kan zijn voor animaties op een webpagina. Wanneer de gebruiker scrolt wil ik dit wel laten zien en zo niet dan niet...

Focus Event

Wanneer een element gefocust is door er doorheen te 'tabben' dan activeert er een focus event.

Load Event

wanneer een webpagina klaar is met inladen, dan word de 'load' event geactiveerd, een default event is dat je script automatische zal gaan inladen. Maar er kunnen ook animaties automatische starten die het load event dragen.

Resource