Event attributen


HTML Event attributen

Event attributen ook wel genoemd gebeurtenis attributen zorgen er onder meer voor dat webpagina's kunnen reageren op muisbewegingen of toetsaanslagen van de gebruiker. Gebeurtenis attributen zijn een belangrijk onderdeel bij het leren van HTML omdat aan de meeste HTML-tags deze attributen toegevoegd kunnen worden, welke betrekking hebben op het uitvoeren van een script.


De onderstaande attributen hebben betrekking op gebeurtenissen in formulieren:

onblur, onchange, onclick, ondblclick, onfocus, oninput, oninvalid, onkeypress, onkeydown, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onselect, onsubmit en onreset.


Onblur attribuuttop

Het onblur attribuut gebruik je om een actie uit te voeren als de gebruiker naar een ander object op de pagina gaat. Dit heet het wijzigen van de focus. De gebeurtenis treedt op wanneer het element de focus verliest. Focus verschuift van het ene object naar het andere bijvoorbeeld als gevolg van het gebruik van de tab-toets.

VoorbeeldVoorbeeld:
Naam: <input type="text" id="veld1" onblur="naam()">


Onchange attribuuttop

Als de gebruiker de inhoud van een tekstveld heeft gewijzigd en wilt verlaten dan kan met onchange een actie uigevoerd worden. Hiermee kan je een functie aanroepen om de inhoud van het tekstveld te controleren.

VoorbeeldVoorbeeld:
Naam: <input name="naam" value="Suzen" onchange="naam()">


Onclick attribuuttop

Het onclick attribuut voert de gebeurtenis uit wanneer de gebruiker met de muis op een knop klikt. Onclick kan je gebruiken bij knoppen, selectievakjes, keuzerondjes enz. meestal is de voorkeur van het gebruik bij knoppen.

VoorbeeldVoorbeeld:
<input type="button" value="Klik me" onclick="alert('Voorbeeld van Onclick!')">

Hieronder een voorbeeld van het onclick attribuut bij het gebruik van selectievakjes.

VoorbeeldVoorbeeld:
<input type="checkbox" onClick="toggle(this)">Alles selecteren


Ondblclick attribuuttop

Het ondblclick attribuut voert een script uit wanneer er bijvoorbeeld op een knop wordt dubbel geklikt.

VoorbeeldVoorbeeld:
<button ondblclick="document.write('Hallo Wereld!')">Dubbel klik</button>


Onfocus attribuuttop

Onfocus gebruik je om een actie uit te voeren als de gebruiker naar een ander object op de pagina gaat. Dit heet het wijzigen van de focus. De gebeurtenis treedt op wanneer het element de focus krijgt. Focus verschuift van het ene object naar het andere meestal door met de muis erop te klikken of door op de tab-toets te drukken.

VoorbeeldVoorbeeld:
Naam: <input type="text" onfocus="this.style.backgroundColor='yellow'">


HTML5Oninput attribuuttop

Oninput wordt geactiveerd wanneer de waarde van een element wordt veranderd. Oninput lijkt veel op de onchange gebeurtenis. Het verschil is dat de oninput gebeurtenis onmiddellijk na de waarde van een element wordt veranderd, terwijl de onchange gebeurtenis op treedt als een element de focus verliest.

VoorbeeldVoorbeeld:
<input type="text" id="getal1" oninput="mijnFunctie()">


HTML5Oninvalid attribuuttop

De oninvalid gebeurtenis wordt geactiveerd wanneer een element ongeldig is.

VoorbeeldVoorbeeld:
Pin: <input name="pin" id="pin" pattern=".{6,12}" 
oninvalid="mijnFunctie()" oninput="setCustomValidity('')" required />


Onkeypress attribuuttop

Het onkeypress attribuut wordt geactiveerd wanneer de gebruiker op een toets van het toetsenbord indrukt en weer loslaat. Met andere woorden, met onkeypress wordt op een toetsaanslag gereageerd.

VoorbeeldVoorbeeld:
<input type="text" onKeyPress="mijnFunctie()">


Onkeydown attribuuttop

De onkeydown gebeurtenis wordt geactiveerd wanneer de gebruiker een toets indrukt.

VoorbeeldVoorbeeld:
<input type="text" onkeydown="mijnFunctie()">


Onkeyup attribuuttop

De onkeyup gebeurtenis wordt geactiveerd wanneer de gebruiker een toets van het toetsenbord indrukt.

VoorbeeldVoorbeeld:
<textarea cols="17" rows="3" name="beschrijving" onkeyup="mijnFunctie()">


Onmousedown attribuuttop

De onmousedown gebeurtenis treedt op als de muisknop wordt ingedrukt.

VoorbeeldVoorbeeld:
<p onmousedown="mouseDown()">Klik hier!</p>


Onmousemove attribuuttop

Met het onmousemove attribuut voer je een actie uit als de muisaanwijzer verplaatst wordt, terwijl deze boven een element is. Het onmousemove attribuut reageert op elke muisbeweging.

VoorbeeldVoorbeeld:
<input type="text" onmousemove="mijnFunctie()">


Onmouseout attribuuttop

Met het attribuut onmouseout voer je een actie uit als de gebruiker bijvoorbeeld een tekstvak heeft aangewezen en daarna de muisaanwijzer verplaatst.

VoorbeeldVoorbeeld:
<textarea cols="30" id="demo" onmouseout="mouseOut()">Demo tekst</textarea>


Onmouseover attribuuttop

Met het attribuut onmouseover voer je een actie uit zodra de gebruiker de muisaanwijzer boven een element plaatst. Met onmouseover hoeft de gebruiker niet op een element te klikken.

VoorbeeldVoorbeeld:
<img src="images/smiley.jpg" 
onmouseover="src='images/smiley_over.jpg'" onmouseout="src='images/smiley.jpg'">


Onmouseup attribuuttop

De onmouseup gebeurtenis treedt op als de ingedrukte muisknop wordt losgelaten.

VoorbeeldVoorbeeld:
<p onmouseup="mouseUp()">Klik hier!</p>


Onselect attribuuttop

Het attribuut onselect wordt geactiveerd wanneer de gebruiker in een invoerveld of tekstveld een deel van de tekst selecteert.

VoorbeeldVoorbeeld:
<input type="text" value="Selecteer mij !!!" onselect="mijnFunctie()">


Onsubmit attribuuttop

De onsubmit gebeurtenis treedt op als de gegevens van een formulier worden verstuurd. Je kunt met onsubmit ook een functie aanroepen om de opgegeven waarden in het formulier te controleren.

VoorbeeldVoorbeeld:
<form onsubmit="mijnFunctie()">


Onreset attribuuttop

Met onreset worden de beginwaarden van een formulier hersteld. Je kunt bijvoorbeeld een functie aanroepen waarmee je de gebruiker via een waarschuwingsvenster laat weten dat de standaard waarden actief zijn.

VoorbeeldVoorbeeld:
<form onreset="mijnFunctie()">