| ## Evenementen in JavaScript
Evenementen zijn acties of gebeurtenissen die plaatsvinden in een webapplicatie.
Ze worden geactiveerd door gebruikersinteracties zoals het klikken op een knop, het bewegen over een element of het indrukken van een toets op het toetsenbord.
Andere voorbeelden van gebeurtenissen zijn het wijzigen van de grootte van een venster, het scrollen door een document of het laden van een pagina.
Gebeurtenissen kunnen worden gebruikt om een webapplicatie interactiever en responsiever te maken door feedback aan de gebruiker te geven en acties te activeren op basis van de invoer van de gebruiker.
Gebeurtenisafhandeling in JavaScript
Om gebeurtenissen in JavaScript af te handelen, kunnen we gebeurtenislisteners gebruiken.
Gebeurtenislisteners zijn functies die worden aangeroepen wanneer een specifieke gebeurtenis plaatsvindt op een doelelement.
We kunnen een gebeurtenislistener aan een element toevoegen met behulp van de methode `addEventListener()`.
Het eerste argument voor `addEventListener()` is de gebeurtenisnaam, en het tweede argument is de gebeurtenishandlerfunctie.
```javascript
const-knop =document.querySelector('knop');
// Voeg een gebeurtenislistener toe voor de 'click'-gebeurtenis op de knop
button.addEventListener('klik', () => {
console.log('Er is op de knop geklikt!');
});
```
In het bovenstaande voorbeeld voegen we een gebeurtenislistener toe aan een knopelement voor de 'click'-gebeurtenis.
Wanneer de gebruiker op de knop klikt, wordt de gebeurtenishandlerfunctie uitgevoerd en wordt het bericht 'Er is op de knop geklikt!' op de console geregistreerd.
We kunnen ook gebeurtenislisteners uit elementen verwijderen met behulp van de methode `removeEventListener()`.
Het eerste argument voor `removeEventListener()` is de gebeurtenisnaam, en het tweede argument is de gebeurtenishandlerfunctie.
```javascript
button.removeEventListener('klik', () => {
console.log('Er is op de knop geklikt!');
});
```
In het bovenstaande voorbeeld verwijderen we de gebeurtenislistener voor de 'click'-gebeurtenis uit het knopelement.
Dit betekent dat de gebeurtenishandlerfunctie niet langer wordt uitgevoerd wanneer de gebruiker op de knop klikt.
Gebeurtenisobject
Wanneer er een gebeurtenis plaatsvindt, wordt een object een gebeurtenisobject genoemd wordt gecreëerd.
Het gebeurtenisobject bevat informatie over de gebeurtenis, zoals het doelelement, het gebeurtenistype en de muispositie.
We hebben toegang tot het gebeurtenisobject in een gebeurtenishandlerfunctie met behulp van de `event`-parameter.
```javascript
button.addEventListener('klik', (gebeurtenis) => {
console.log(gebeurtenis);
});
```
In het bovenstaande voorbeeld registreren we het gebeurtenisobject in de console.
Hierdoor kunnen we informatie zien over de klikgebeurtenis, zoals het doelelement, het gebeurtenistype en de muispositie.
Gebeurtenissen opborrelen en vastleggen
Gebeurtenisbubbel verwijst naar de manier waarop gebeurtenissen zich door de DOM-boom voortplanten.
Wanneer er een gebeurtenis plaatsvindt, wordt deze eerst geactiveerd op het doelelement.
Als het doelelement geen gebeurtenislistener voor de gebeurtenis heeft, wordt de gebeurtenis doorgestuurd naar het bovenliggende element.
Dit gaat door totdat de gebeurtenis de top van de DOM-boom bereikt.
Gebeurtenis vastleggen is het tegenovergestelde van het borrelen van gebeurtenissen.
Wanneer het vastleggen van gebeurtenissen is ingeschakeld, worden gebeurtenissen eerst geactiveerd bovenaan de DOM-structuur en verspreiden ze zich vervolgens naar het doelelement.
We kunnen het vastleggen van gebeurtenissen inschakelen door de derde parameter van de methode `addEventListener()` in te stellen op `true`.
```javascript
button.addEventListener('klik', (gebeurtenis), waar);
```
In het bovenstaande voorbeeld schakelen we het vastleggen van gebeurtenissen in voor de 'klik'-gebeurtenis op het knopelement.
Dit betekent dat de 'click'-gebeurtenis eerst wordt geactiveerd bovenaan de DOM-boom en zich vervolgens voortplant naar het knopelement.
Conclusie
Gebeurtenissen vormen een fundamenteel onderdeel van JavaScript en worden gebruikt om webapplicaties interactiever en responsiever te maken.
Door te begrijpen hoe evenementen werken, kunnen we webapplicaties maken die leuker en gebruiksvriendelijker zijn. |
