JavaScript HTML DOM Evenementen

HTML DOM staat JavaScript toe om te reageren op HTML-gebeurtenissen:

De muis komt erbij!
Klik op mij

Reageren op gebeurtenissen

JavaScript kan worden uitgevoerd wanneer een gebeurtenis optreedt, zoals wanneer de gebruiker op een HTML-element klikt.

Om code uit te voeren wanneer de gebruiker op een element klikt, voeg JavaScript-code toe aan de HTML-gebeurtenisattributen:

onclick=JavaScript

Voorbeeld van een HTML-gebeurtenis:

  • Wanneer de gebruiker op de muisknop klikt
  • wanneer de pagina is geladen
  • wanneer het beeld is geladen
  • wanneer de muis over het element beweegt
  • wanneer het invoerveld wordt gewijzigd
  • wanneer het HTML-formulier wordt ingediend
  • wanneer de gebruiker een toets indrukt

In dit voorbeeld, wanneer de gebruiker <h1> wanneer, zal de inhoud worden gewijzigd:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Hello!'">Klik op deze tekst!</h1>
</body>
</html>

Probeer het zelf

In dit voorbeeld wordt een functie aangeroepen vanuit een event handler:

Voorbeeld

<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Klik op deze tekst!</h1>
<script>
function changeText(id) { 
    id.innerHTML = "Hello:)";
}
</script>
</body>
</html>

Probeer het zelf

HTML gebeurtenis-eigenschappen

Als je een gebeurtenis wilt toewijzen aan een HTML-element, kun je de gebeurtenis-eigenschappen gebruiken.

Voorbeeld

Toewijzen aan button-elementen onclick Gebeurtenissen:

<button onclick="displayDate()">Probeer het uit</button>

Probeer het zelf

In het voorbeeld wordt de functie displayDate uitgevoerd wanneer de knop wordt geklikt.

Toewijzen van gebeurtenissen met HTML DOM

HTML DOM staat je toe om gebeurtenissen toe te wijzen aan HTML-elementen met JavaScript:

Voorbeeld

Toewijzen van gebeurtenissen aan button-elementen onclick Gebeurtenissen:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>

Probeer het zelf

In het voorbeeld wordt de functie displayDate toegewezen aan het HTML-element met id="myBtn".

uitgevoerd wanneer op de knop wordt geklikt.

onload en onunload gebeurtenissen

Wanneer de gebruiker de pagina binnenkomt en verlaat, worden onload en onunload gebeurtenissen.

onload gebeurtenissen kunnen gebruikt worden om de browser en versie van de bezoeker te detecteren, en vervolgens de juiste versie van de pagina te laden op basis van deze informatie.

onload en onunload gebeurtenissen kunnen gebruikt worden om cookies te verwerken.

Voorbeeld

<body onload="checkCookies()">

Probeer het zelf

onchange gebeurtenis

onchange deze gebeurtenissen vaak combineert met het valideren van invoervelden.

Hier is een voorbeeld van hoe je onchange van een voorbeeld. Wanneer de gebruiker de inhoud van het invoerveld wijzigt, wordt de functie upperCase() aangeroepen.

Voorbeeld

<input type="text" id="fname" onchange="upperCase()">

Probeer het zelf

onmouseover en onmouseout evenementen

onmouseover en onmouseout De gebeurtenissen kunnen worden gebruikt om een functie te activeren wanneer de gebruiker de muis op een HTML-element zet of eraf haalt:

De muis komt erbij!

Probeer het zelf

onmousedown, onmouseup en onclick-gebeurtenissen

onmousedown, onmouseup en onclick De gebeurtenissen构成完整的鼠标点击事件。

Eerst wanneer de muisknop wordt ingedrukt:onmousedown Het evenement wordt geactiveerd; vervolgens wanneer de muisknop wordt losgelaten:onmouseup Het evenement wordt geactiveerd; tenslotte, wanneer het muisklik is voltooid:onclick Het evenement wordt geactiveerd.

Klik op mij

Probeer het zelf

Meer voorbeelden

onmousedown en onmouseup
Verander het beeld wanneer de gebruiker de muisknop indrukt.
onload
Toon een waarschuwingsovenstaand venster wanneer de pagina volledig is geladen.
onfocus
Verander de achtergrondkleur van het invoerveld wanneer het veld de focus krijgt.
Muisgebeurtenissen
Verander de kleur van het element wanneer de muis erop wordt gezet.

HTML DOM Event-object referentiemanual

Voor een volledige lijst van alle HTML DOM-gebeurtenissen, bezoek dan onze volledige HTML DOM Event-object referentiemanual.