Het Event-Object in JavaScript Begrijpen
Telkens wanneer er een gebeurtenis optreedt in JavaScript, wordt er automatisch een event-object doorgegeven aan de event handler. Dit object bevat belangrijke informatie over de gebeurtenis, zoals het element dat deze heeft geactiveerd (target), het type gebeurtenis (type), en methoden om het gedrag van de gebeurtenis te regelen, zoals preventDefault() en stopPropagation().
Toegang tot gebeurtenisgerelateerde informatie
Het event-object bevat verschillende nuttige eigenschappen en methoden waarmee informatie over de gebeurtenis kan worden geraadpleegd en ermee kan worden gecommuniceerd.
target
De eigenschap target verwijst naar het element dat de gebeurtenis heeft geactiveerd. Hiermee kan worden bepaald op welk element is geklikt, gehooverd of mee is geïnteracteerd.
index.html
index.css
index.js
event.target wordt gebruikt om de specifieke knop te identificeren die is aangeklikt, en de id hiervan wordt weergegeven in de paragraaf met het ID display.
type
De eigenschap type geeft het type gebeurtenis aan dat heeft plaatsgevonden (bijvoorbeeld click, submit, keydown).
index.html
index.css
index.js
Het event.type wordt weergegeven in de paragraaf als feedback, waarmee wordt getoond dat er een click-gebeurtenis heeft plaatsgevonden. Daarnaast wordt bij het klikken op de knop de achtergrondkleur van het gehele body-element gewijzigd naar lightblue.
preventDefault()-methode in het Event-object
De preventDefault()-methode stopt het standaardgedrag van een element, zoals het voorkomen dat een link navigeert of het verhinderen dat een formulier wordt verzonden.
index.html
index.css
index.js
Hier voorkomt preventDefault() de standaardactie (navigeren naar een nieuwe pagina) bij het klikken op de link. In plaats daarvan wordt er een waarschuwing weergegeven.
Praktisch Voorbeeld: Afhandeling van Formulierverzending en Gebruik van het Event Object
Valideer een formulier, voorkom verzending als velden leeg zijn, en toon de gegevens van het formulier samen met event-gerelateerde informatie zoals de target, type, en hoe preventDefault() standaardformulierverzending voorkomt.
index.html
index.css
index.js
Wanneer het "Sign Up"-formulier wordt ingediend, onderschept een event listener de inzending met event.preventDefault(). Als het gebruikersnaam- of wachtwoordveld leeg is, wordt een foutmelding weergegeven; anders verschijnt er een succesmelding met de ingediende gebruikersnaam. Daarnaast worden details over het event—zoals type, formulier-ID en of de standaardactie is voorkomen—weergegeven in een speciaal gedeelte. Het formulier wordt vervolgens gereset voor verder gebruik.
1. Welke informatie geeft de eigenschap event.target?
2. Waarom zou je event.preventDefault() gebruiken bij een formulierverzendingsgebeurtenis?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Can you explain how to use event.target in a real example?
What other useful properties are available on the event object?
How does preventDefault() differ from stopPropagation()?
Awesome!
Completion rate improved to 2.22Het Event-Object in JavaScript Begrijpen
Veeg om het menu te tonen
Telkens wanneer er een gebeurtenis optreedt in JavaScript, wordt er automatisch een event-object doorgegeven aan de event handler. Dit object bevat belangrijke informatie over de gebeurtenis, zoals het element dat deze heeft geactiveerd (target), het type gebeurtenis (type), en methoden om het gedrag van de gebeurtenis te regelen, zoals preventDefault() en stopPropagation().
Toegang tot gebeurtenisgerelateerde informatie
Het event-object bevat verschillende nuttige eigenschappen en methoden waarmee informatie over de gebeurtenis kan worden geraadpleegd en ermee kan worden gecommuniceerd.
target
De eigenschap target verwijst naar het element dat de gebeurtenis heeft geactiveerd. Hiermee kan worden bepaald op welk element is geklikt, gehooverd of mee is geïnteracteerd.
index.html
index.css
index.js
event.target wordt gebruikt om de specifieke knop te identificeren die is aangeklikt, en de id hiervan wordt weergegeven in de paragraaf met het ID display.
type
De eigenschap type geeft het type gebeurtenis aan dat heeft plaatsgevonden (bijvoorbeeld click, submit, keydown).
index.html
index.css
index.js
Het event.type wordt weergegeven in de paragraaf als feedback, waarmee wordt getoond dat er een click-gebeurtenis heeft plaatsgevonden. Daarnaast wordt bij het klikken op de knop de achtergrondkleur van het gehele body-element gewijzigd naar lightblue.
preventDefault()-methode in het Event-object
De preventDefault()-methode stopt het standaardgedrag van een element, zoals het voorkomen dat een link navigeert of het verhinderen dat een formulier wordt verzonden.
index.html
index.css
index.js
Hier voorkomt preventDefault() de standaardactie (navigeren naar een nieuwe pagina) bij het klikken op de link. In plaats daarvan wordt er een waarschuwing weergegeven.
Praktisch Voorbeeld: Afhandeling van Formulierverzending en Gebruik van het Event Object
Valideer een formulier, voorkom verzending als velden leeg zijn, en toon de gegevens van het formulier samen met event-gerelateerde informatie zoals de target, type, en hoe preventDefault() standaardformulierverzending voorkomt.
index.html
index.css
index.js
Wanneer het "Sign Up"-formulier wordt ingediend, onderschept een event listener de inzending met event.preventDefault(). Als het gebruikersnaam- of wachtwoordveld leeg is, wordt een foutmelding weergegeven; anders verschijnt er een succesmelding met de ingediende gebruikersnaam. Daarnaast worden details over het event—zoals type, formulier-ID en of de standaardactie is voorkomen—weergegeven in een speciaal gedeelte. Het formulier wordt vervolgens gereset voor verder gebruik.
1. Welke informatie geeft de eigenschap event.target?
2. Waarom zou je event.preventDefault() gebruiken bij een formulierverzendingsgebeurtenis?
Bedankt voor je feedback!
