Handling Events - YunusEmreCMD/blokTech GitHub Wiki

Event Handlers

Je kunt een functie aan een actie koppelen door addEventListener te gebruiken op het element waar er interactie mee gevoerd wordt, dit moet in de javascript worden gedaan. Hetzelfde kan ook bereikt worden door een element in de HTML een onclick attribuut mee te geven. Het verschil ligt in het volgende: Aan een onclick kan je maar 1 actie koppelen, terwijl je bij een addEventListener meer acties kunt koppelen.

Propagation

Wanneer een parent element een actie aan zich gekoppeld krijgt, zullen de children ook dezelfde actie krijgen. Maar de actie op het element dat specifieker is benoemd wordt eerder uitgevoerd. (Bijvoorbeeld een knop in een paragraaf.) Om tegen te gaan dat beide acties worden uitgevoerd kan je stopPropagation gebruiken.

button.addEventListener("mousedown", event => {

console.log("Handler for button.");

if (event.button == 2) event.stopPropagation();

});

Verschillende soorten events/clicks

Key events pointer events touch events mouse clicks mouse motion scroll events focus events load events.

Debouncing

Events als mousemove en scroll zijn acties die vaak achter elkaar worden gedaan. Als je lange handlers gebruikt op deze events, zal de website sloom kunnen aanvoelen. Om dit tegen te gaan kan je gebruik maken van setTimeout, dit zorgt ervoor dat de handler op je event niet te vaak af gaat. Deze oplossing wordt “deboucing” genoemd. Zie hieronder een voorbeeld:

let textarea = document.querySelector("textarea");

let timeout;

textarea.addEventListener("input", () => {

clearTimeout(timeout);

timeout = setTimeout(() => console.log("Typed!"), 500);

});