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 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 isfalse, 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.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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()?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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.22Introductie 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 isfalse, 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.css
index.js
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.css
index.js
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.css
index.js
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.css
index.js
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()?
Bedankt voor je feedback!
