JavaScript HTML DOM-gebeurtenissen
Met HTML DOM kan JavaScript reageren op HTML-gebeurtenissen:
Reageren op gebeurtenissen
Een JavaScript kan worden uitgevoerd wanneer een gebeurtenis plaatsvindt, bijvoorbeeld wanneer een gebruiker op een HTML-element klikt.
Om code uit te voeren wanneer een gebruiker op een element klikt, voegt u JavaScript-code toe aan een HTML-gebeurteniskenmerk:
onclick=JavaScript
Voorbeelden van HTML-gebeurtenissen:
- Wanneer een gebruiker met de muis klikt
- Wanneer een webpagina is geladen
- Wanneer een afbeelding is geladen
- Wanneer de muis over een element beweegt
- Wanneer een invoerveld wordt gewijzigd
- Wanneer een HTML-formulier wordt ingediend
- Wanneer een gebruiker op een toets drukt
In dit voorbeeld wordt de inhoud van het <h1>element gewijzigd wanneer een gebruiker erop klikt:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
In dit voorbeeld wordt een functie aangeroepen vanuit de gebeurtenishandler:
Voorbeeld
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
HTML-gebeurteniskenmerken
Om gebeurtenissen aan HTML-elementen toe te wijzen, kunt u gebeurtenisattributen gebruiken.
Voorbeeld
Wijs een onclick-gebeurtenis toe aan een knopelement:
<button onclick="displayDate()">Try it</button>
In het bovenstaande voorbeeld wordt een functie met de naam displayDateuitgevoerd wanneer op de knop wordt geklikt.
Gebeurtenissen toewijzen met behulp van de HTML DOM
Met de HTML DOM kunt u gebeurtenissen toewijzen aan HTML-elementen met behulp van JavaScript:
Voorbeeld
Wijs een onclick-gebeurtenis toe aan een knopelement:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
In het bovenstaande voorbeeld is een functie met de naam displayDatetoegewezen aan een HTML-element met de id="myBtn".
De functie wordt uitgevoerd wanneer op de knop wordt geklikt.
De onload- en onunload-gebeurtenissen
De onloaden onunloadgebeurtenissen worden geactiveerd wanneer de gebruiker de pagina betreedt of verlaat.
De onloadgebeurtenis kan worden gebruikt om het browsertype en de browserversie van de bezoeker te controleren en de juiste versie van de webpagina te laden op basis van de informatie.
De onloaden onunloadevenementen kunnen worden gebruikt om met cookies om te gaan.
Voorbeeld
<body onload="checkCookies()">
Het onchange-evenement
De onchangegebeurtenis wordt vaak gebruikt in combinatie met validatie van invoervelden.
Hieronder ziet u een voorbeeld van het gebruik van de onchange. De upperCase()
functie wordt aangeroepen wanneer een gebruiker de inhoud van een invoerveld wijzigt.
Voorbeeld
<input type="text" id="fname"
onchange="upperCase()">
De gebeurtenissen onmouseover en onmouseout
De gebeurtenissen onmouseoveren onmouseoutkunnen worden gebruikt om een functie te activeren wanneer de gebruiker met de muis over of uit een HTML-element gaat:
De gebeurtenissen onmousedown, onmouseup en onclick
De onmousedown, onmouseup, en onclickgebeurtenissen zijn allemaal onderdelen van een muisklik. Eerst wanneer een muisknop wordt geklikt, wordt de onmousedown-gebeurtenis geactiveerd, vervolgens, wanneer de muisknop wordt losgelaten, wordt de onmouseup-gebeurtenis geactiveerd, en ten slotte, wanneer de muisklik is voltooid, wordt de onclick-gebeurtenis geactiveerd.
Meer voorbeelden
Verander een afbeelding wanneer een gebruiker de muisknop ingedrukt houdt.
Geef een waarschuwingsvenster weer wanneer de pagina is geladen.
Verander de achtergrondkleur van een invoerveld wanneer het focus krijgt.
Verander de kleur van een element wanneer de cursor erover beweegt.
HTML DOM-gebeurtenisobjectreferentie
Bekijk onze volledige HTML DOM Event Object Reference voor een lijst met alle HTML DOM-gebeurtenissen .