Introductie tot Events en Event Listeners

Wat zijn gebeurtenissen in JavaScript?

JavaScript biedt mechanismen om deze gebeurtenissen af te handelen en specifieke code uit te voeren als reactie, waardoor je webapplicatie interactief en dynamisch wordt.

Veelvoorkomende typen gebeurtenissen

Uitleg van addEventListener() en het Koppelen van Event Listeners

Om op gebeurtenissen in JavaScript te reageren, wordt een event listener aan een element gekoppeld. De meest gebruikte methode hiervoor is de functie addEventListener(), die luistert naar specifieke gebeurtenissen en een functie aanroept wanneer de gebeurtenis plaatsvindt.

element.addEventListener('event', function, useCapture);

• event: Het type gebeurtenis waarop geluisterd wordt (bijvoorbeeld 'click', 'submit');
• function: De callbackfunctie die wordt uitgevoerd wanneer de gebeurtenis wordt geactiveerd;
• useCapture (optioneel): Een boolean die aangeeft of de gebeurtenis tijdens de capturing- of bubbling-fase moet worden opgevangen (standaard is false, wat betekent dat er tijdens de bubbling-fase wordt geluisterd).

Click Event Listener

Een click event listener koppelen aan de knop. Bij een klik wordt een alert getoond.

De event listener is gekoppeld aan het #myButton-element, en wanneer de gebruiker op de knop klikt, verschijnt er een berichtvenster met de tekst "Button clicked!"

Submit-eventlistener

Een event listener toevoegen voor het submit-event, waarbij het standaardgedrag van het formulier wordt voorkomen om de gegevens met JavaScript te verwerken.

Een event listener op het submit-event van het formulier voorkomt de standaardverzending met event.preventDefault(), waardoor aangepaste JavaScript de gegevens kan verwerken. Bij verzending wordt de ingevoerde naam opgehaald en weergegeven in een paragraaf met het ID displayName.

Keypress-event

Een keypress-event listener toevoegen aan het invoerveld. Wanneer een toets wordt ingedrukt, wordt deze weergegeven in de paragraaf.

Elke keer dat een toets wordt ingedrukt tijdens het typen in het invoerveld, wordt de ingedrukte toets gelogd naar de console.

Praktisch voorbeeld: Formulier validatie afhandelen bij verzenden

Logica voor het valideren van het formulier vóór het verzenden van het formulier.

De submit event listener zorgt ervoor dat het formulier niet wordt verzonden als de verplichte velden leeg zijn. Als het gebruikersnaam- of wachtwoordveld leeg is, wordt het evenement tegengehouden en verschijnt er een foutmelding.