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:

  1. het soort event waarnaar geluisterd moet worden
  2. 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 🚴‍♀️🚴‍♀️