Events

Good to know: button

Een HTML-element dat we in JavaScript vaak nodig hebben, is het <button> element

Wordt gebruikt om acties uit te voeren
doet uit zichzelf niets

<button class="start">Start animation</button>

Verschil Buttons & Anchors

<a>: navigatie naar een andere pagina of sectie
<button>: interacties met JavaScript

💅 De styling kan gelijkaardig zijn, maar semantisch zijn het 2 verschillende elementen!

⚠️ Je kan <button> en <a> nooit combineren

Wat is een event?

Event

= Een gebeurtenis die optreedt in de browser, vb:

click = een gebruiker klikt op iets
keydown = een toets wordt ingedrukt
mouseover = de cursor beweegt over een element
submit = formulier wordt ingediend
...

🔥 Events triggeren

Een event wordt getriggerd of geactiveerd door:

een interactie van de gebruiker, zoals een click
een script, zoals myButton.click()
of automatisch, wanneer een taak in de achtergrond is afgerond, zoals het inladen van het volledige HTML document: DOMContentLoaded

🥅 Events opvangen

Je kan naar een event "luisteren"
= een seintje krijgen als het gebeurd is
Hiervoor gebruik je een event listener
Daarna kan je een stukje code laten uitvoeren

const alertButton = document.querySelector("button");

alertButton.addEventListener("click", function() {
  alert("Iemand heeft op de knop geklikt!");
});

Event Listeners

.addEventListener()

Met de .addEventListener() method kan je een event detecteren en erop reageren
Je hangt het aan een target zoals document of eender welk HTML element dat je uit de DOM haalt.

document.addEventListener("keydown", function() {
  // code
});

document.querySelector("button").addEventListener("click", function() {
  // code
});

.addEventListener()

Een event listener heeft 2 parameters nodig:

het soort event waarnaar geluisterd moet worden
een stukje code dat je wilt uitvoeren wanneer het event gebeurt = een functie

document.addEventListener("click", function() {
  // code
});

Inline function

Wordt direct in de addEventListener geplaatst
Een functie start met function() Daarna zet je de code die je wilt uitvoeren tussen accolades { }
Handig voor kleine acties, maar niet herbruikbaar

document.addEventListener("click", function() {
    console.log("Geklikt!");
});

Named functions

Herbruikbaar
Je schrijft de functie apart en geeft een unieke naam naast het function keyword.
Daarna gebruik je deze naam in je eventListener.

function handleClick() {
    console.log("Geklikt!");
}

myButton.addEventListener("click", handleClick);
mySecondButton.addEventListener("click", handleClick);

Let op: Hier gebruiken we geen haakjes () om de functie op te roepen.
Zo vermijden we dat de functie al eens opgeroepen bij het inladen van het script.

Event Object

Geeft extra info over het event
Krijg je 'gratis' mee als parameter in je functie
bijvoorbeelden:

document.addEventListener("click", function(event) {
    console.log("Je klikte op:", event.target);
});

event.target: het element waarop geklikt is

event.type: type event (vb. "click" of "keydown")

event.clientX & event.clientY: x- & y-coördinaat van de muis

Veelgebruikte events

Klik events

click
Met muis/keypad of op enter duwen
Wordt gebruikt voor knoppen, links, en interactieve elementen

<button id="my-button">Klik hier!</button>
<p id="text">Loading...</p>

index.html

const button = document.getElementById("my-button");

button.addEventListener("click", function() {
  document.getElementById("text").innerText = "Je hebt geklikt!";
});

main.js

Toetenbord events

keydown: wanneer een toets wordt ingedrukt
keyup: wanneer een toets wordt losgelaten
het event object geeft je toegang tot extra informatie, zoals welke toets er ingedrukt werd

document.addEventListener("keydown", function(event) {
  console.log("Je drukte op: " + event.key);
});

Muis events

mouseover: wanneer de cursor over een (child) element gaat
mouseout: wanneer de cursor uit een element weg gaat of vanuit een child element naar de parent beweegt
mouseleave: wanneer de cursor uit een element en uit alle child elementen weg gaat

document.addEventListener("mouseleave", triggerEmailPopUp;

function triggerEmailPopUp() {
    alert("Wil je onze nieuwsbrief ontvangen? Schrijf je in!"); 
}

Page lifecycle events

DOMContentLoaded: wanneer het HTML document volledig is geladen, maar zonder styles en afbeeldingen
load: wanneer alles is geladen, inclusief styles en afbeeldingen

document.addEventListener("DOMContentLoaded", function() {
	console.log("Pagina geladen!");
});

En nog zo veel meer

input: wanneer een input veld wordt gewijzigd
contextmenu: wanneer de rechtermuisknop wordt ingeduwd (voordat het contextmenu opent)
submit: bij het indienen van een formulier
transitionend: wanneer een CSS transitie gedaan is
scroll: wanneer een element gescrolld is
...

Je vindt een volledig overzicht op de MDN pagina over Elements > linker zijbalk 'Events'

Event Bubbling & Preventing Default

Event bubbling (basis)

Events bubbelen omhoog in de DOM
= worden doorgegeven naar parents en andere ancestors, tot aan de root
event.stopPropagation(); stopt het omhoog bubbelen

<div id="parent">
  <button id="child">Klik hier</button>
</div>

index.html

document.getElementById("parent").addEventListener("click", function() {
  console.log("Parent geklikt!");
});

document.getElementById("child").addEventListener("click", function(event) {
  console.log("Child geklikt!");
  event.stopPropagation(); // Voorkomt bubbling
});

main.js

preventDefault()

Voorkomt het standaard gedrag van een event
Voorbeelden:
- Een formulier (<form>) versturen → Voorkomt dat de pagina herlaadt en in plaats daarvan een bericht tonen op de pagina.
- Een 'ben je zeker dat je deze link wilt bezoeken' alert tonen vooraleer de gebruiker wordt doorgestuurd naar een externa pagina.

<a href="https://digitalevormgeving.gent" id="link">Portfolio van DVG</a>

index.html

document.getElementById("link").addEventListener("click", function(event) {
  event.preventDefault();
  alert("Link is geblokkeerd!");
});

main.js

Demo time 🚴‍♀️🚴‍♀️

5. Events

5. Events

Lecturer GDM PRO

5. Events

More from Lecturer GDM