JavaScript- evenementen
HTML-gebeurtenissen zijn "dingen" die gebeuren met HTML-elementen.
Wanneer JavaScript wordt gebruikt in HTML-pagina's, kan JavaScript op deze gebeurtenissen "reageren" .
HTML-gebeurtenissen
Een HTML-gebeurtenis kan iets zijn dat de browser doet of iets dat een gebruiker doet.
Hier zijn enkele voorbeelden van HTML-gebeurtenissen:
- Er is een HTML-webpagina geladen
- Een HTML-invoerveld is gewijzigd
- Er is op een HTML-knop geklikt
Vaak wil je iets doen als er iets gebeurt.
Met JavaScript kunt u code uitvoeren wanneer gebeurtenissen worden gedetecteerd.
HTML staat toe dat gebeurtenishandlerattributen, met JavaScript-code , aan HTML-elementen worden toegevoegd.
Met enkele aanhalingstekens:
<element
event='some JavaScript'>
Met dubbele aanhalingstekens:
<element
event="some JavaScript">
In het volgende voorbeeld wordt een onclickattribuut (met code) toegevoegd aan een
<button>element:
Voorbeeld
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
In het bovenstaande voorbeeld verandert de JavaScript-code de inhoud van het element met id="demo".
In het volgende voorbeeld verandert de code de inhoud van zijn eigen element (met this.innerHTML):
Voorbeeld
<button onclick="this.innerHTML = Date()">The time is?</button>
JavaScript-code is vaak meerdere regels lang. Het is gebruikelijker om gebeurtenisattributen te zien die functies aanroepen:
Voorbeeld
<button onclick="displayDate()">The time is?</button>
Algemene HTML-gebeurtenissen
Hier is een lijst met enkele veelvoorkomende HTML-gebeurtenissen:
| Evenement | Beschrijving |
|---|---|
| onchange | Er is een HTML-element gewijzigd |
| bij klikken | De gebruiker klikt op een HTML-element |
| muis over | De gebruiker beweegt de muis over een HTML-element |
| onmouseout | De gebruiker beweegt de muis weg van een HTML-element |
| op keydown | De gebruiker drukt op een klaviertoets |
| laden | De browser is klaar met het laden van de pagina |
De lijst is veel langer: W3Schools JavaScript Reference HTML DOM Events .
JavaScript-gebeurtenishandlers
Event-handlers kunnen worden gebruikt om gebruikersinvoer, gebruikersacties en browseracties af te handelen en te verifiëren:
- Dingen die moeten worden gedaan elke keer dat een pagina wordt geladen
- Dingen die moeten worden gedaan wanneer de pagina is gesloten
- Actie die moet worden uitgevoerd wanneer een gebruiker op een knop klikt
- Inhoud die moet worden geverifieerd wanneer een gebruiker gegevens invoert
- En meer ...
Er kunnen veel verschillende methoden worden gebruikt om JavaScript met gebeurtenissen te laten werken:
- HTML-gebeurtenisattributen kunnen JavaScript-code direct uitvoeren
- HTML-gebeurtenisattributen kunnen JavaScript-functies aanroepen
- U kunt uw eigen event handler-functies toewijzen aan HTML-elementen
- U kunt voorkomen dat gebeurtenissen worden verzonden of afgehandeld
- En meer ...
In de HTML DOM-hoofdstukken leert u veel meer over gebeurtenissen en gebeurtenisafhandelaars.