Handling Events

Chapter 15: Handling Events

Event Handlers Event handlers zijn gebeurtenissen (events) die plaatsvinden in de browser. Dit wordt aan de code doorgegeven wanneer zich een gebeurtenis voordoet. Door handlers te maken voor deze specifieke gebeurtenissen (handelingen van gebruikers) kan de browser ze herkennen.

<p>Click this document to activate the handler.</p>

<script>

window.addEventListener("click", () => {

``console.log("You knocked?");``

});

</script>

window vertegenwoordigt het object waar de gebruiker de handeling uitvoert. In dit geval staat window voor het hele venster van het document.

Events and DOM nodes

<button>Click me</button>

<p>No handler here.</p>

<script>

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

button.addEventListener("click", () => {

`console.log("Button clicked.");`

});

</script>

Je hebt de button variable, en de addEventListener registreert binnengekomen handelingen van gebruikers, dat is een Event object. Een event object is dus de directe handeling op de browser door de gebruiker. Dus als iemand bijvoorbeeld klikt op de button wordt deze eventhandler geactiveerd en dus herkent. Voorbeelden van event objects zijn dus click, mousedown, drag etc.

Propagation stopPropagation methode wordt gebruikt om ervoor te zorgen dat de eventhandlers niet op andere delen van de code overschakelen (de parents). Hiervoor kan je ook de target methode gebruiken, waardoor je dus doelt op een event (bijv. de button) .preventDefault zorgt ervoor dat de browser niet op de standaard manier een event gaat uitvoeren (bijv. de pijl omlaag drukt, schuift de browser de pagina omlaag) met .preventDefault kan je ditt dus stopzetten.