Begrip: Events
Events worden afgevuurd om de code te verwittigen dat er iets interessant gebeurd is. De bron van deze events is meestal een actie van de gebruiker, e.g. het klikken op een knop, het herschalen van het venster, het typen in een formulier, ... In sommige gevallen kan een event ook veroorzaakt worden door gebeurtenis op het systeem van de gebruiker, zo kan een bijna lege batterij of een wijziging in de netwerkverbinding ook JavaScript code triggeren. De volledige lijst van events is beschikbaar op mdn.
Events kunnen op twee manieren gekoppeld worden aan JavaScript code. Aan HTML-attributen zoals onclick, onchange, ... kan JavaScript code meegegeven worden, anderszijds kan een event gekoppeld worden aan HTMLElement via de addEventListener methode.
De tweede aanpak geniet in alle gevallen de voorkeur, via de addEventListener methode wordt altijd een parameter meegegeven aan de handler functie die informatie over het event bevat. Wat deze informatie juist is, verschilt van event tot event. Een MouseEvent bevat informatie over hoe de mouse bewogen is (boven-onder, links-rechts, snelheid), een ChangeEvent bevat informatie over de waarde die in het formulierelement ingegeven is, een KeydownEvent bevat de knop die ingedrukt is, ...
<html lang="en">
<head>
<title>Voorbeeld</title>
</head>
<body>
<button onclick="showAlert1()">Click Me!</button>
<button id="second-button">Click Me V2!</button>
<script>
function showAlert1() {
alert('Hello World!')
}
document.getElementById('second-button')
.addEventListener('click', showAlert2)
function showAlert2(eventInfo) {
console.log(eventInfo)
alert('Hello World!')
}
</script>
</body>
</html>