Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Introductie tot Events en Event Listeners | Eventafhandeling en Gebruikersinteracties in JavaScript
Geavanceerde JavaScript-Beheersing

bookIntroductie 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 uw webapplicatie interactief en dynamisch wordt.

Veelvoorkomende gebeurtenistypen

Uitleg van addEventListener() en het Koppelen van Event Listeners

Om te reageren op gebeurtenissen in JavaScript, koppel je een event listener aan een element. De meest gebruikelijke 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 je wilt luisteren (bijvoorbeeld 'click', 'submit');
  • function: De callbackfunctie die wordt uitgevoerd wanneer de gebeurtenis wordt geactiveerd;
  • useCapture (optioneel): Een boolean die aangeeft of de gebeurtenis moet worden opgevangen tijdens de capturing- of bubbling-fase (standaard is false, wat betekent dat er wordt geluisterd tijdens de bubbling-fase).

Click Event Listener

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

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

Submit Event Listener

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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 opstellen voor de validatie van het formulier vóór het verzenden van het formulier.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

1. Wat is het doel van addEventListener()?

2. Welke van de volgende is GEEN geldig gebeurtenistype voor addEventListener()?

question mark

Wat is het doel van addEventListener()?

Select the correct answer

question mark

Welke van de volgende is GEEN geldig gebeurtenistype voor addEventListener()?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 1

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Suggested prompts:

What are some other common event types in JavaScript?

Can you explain how event propagation works?

How do I remove an event listener in JavaScript?

Awesome!

Completion rate improved to 2.22

bookIntroductie tot Events en Event Listeners

Veeg om het menu te tonen

Wat zijn gebeurtenissen in JavaScript?

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

Veelvoorkomende gebeurtenistypen

Uitleg van addEventListener() en het Koppelen van Event Listeners

Om te reageren op gebeurtenissen in JavaScript, koppel je een event listener aan een element. De meest gebruikelijke 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 je wilt luisteren (bijvoorbeeld 'click', 'submit');
  • function: De callbackfunctie die wordt uitgevoerd wanneer de gebeurtenis wordt geactiveerd;
  • useCapture (optioneel): Een boolean die aangeeft of de gebeurtenis moet worden opgevangen tijdens de capturing- of bubbling-fase (standaard is false, wat betekent dat er wordt geluisterd tijdens de bubbling-fase).

Click Event Listener

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

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

Submit Event Listener

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

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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 opstellen voor de validatie van het formulier vóór het verzenden van het formulier.

index.html

index.html

index.css

index.css

index.js

index.js

copy

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.

1. Wat is het doel van addEventListener()?

2. Welke van de volgende is GEEN geldig gebeurtenistype voor addEventListener()?

question mark

Wat is het doel van addEventListener()?

Select the correct answer

question mark

Welke van de volgende is GEEN geldig gebeurtenistype voor addEventListener()?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 3. Hoofdstuk 1
some-alt