HTML-events zijn "dingen" die gebeuren met HTML-elementen. Als JavaScript wordt gebruikt in HTML-pagina's, kan JavaScript op deze gebeurtenissen "reageren" .
Een HTML-gebeurtenis kan iets zijn dat de browser doet of iets dat een gebruiker doet. Hier zijn enkele voorbeelden van HTML-gebeurtenissen:
Met JavaScript kunt u code uitvoeren wanneer gebeurtenissen worden gedetecteerd.
In HTML kunnen event handler-attributen gevuld worden met JavaScript-code.
Met enkele aanhalingstekens:
<element event='some JavaScript'>
Met dubbele aanhalingstekens:
<element event="some JavaScript">
In het volgende onclick voorbeeld wordt een attribuut (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, daarom is het gebruikelijk om een functie aan te roepen bij een event:
Voorbeeld
<button onclick="displayDate()">The time is?</button>
Hier is een lijst met enkele veelvoorkomende HTML-gebeurtenissen:
Evenement | Omschrijving |
onchange | Een HTML-element is gewijzigd |
onclick | De gebruiker klikt op een HTML-element |
onmouseover | De gebruiker beweegt de muis over een HTML-element |
onmouseout | De gebruiker beweegt de muis weg van een HTML-element |
onkeydown | De gebruiker drukt op een toets |
onload | De browser is klaar met het laden van de pagina |
De lijst is veel langer: W3Schools JavaScript Reference HTML DOM Events.
Event handlers kunnen worden gebruikt om gebruikersinvoer, gebruikersacties en browseracties af te handelen en te verifiëren:
Er kunnen verschillende methoden worden gebruikt om JavaScript met gebeurtenissen te laten werken: