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 attribuut
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.
Onchange attribuut
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.
Onclick attribuut
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.
Voorbeeld:
<input type="button" value="Klik me" onclick="alert('Voorbeeld van Onclick!')">
Hieronder een voorbeeld van het onclick attribuut bij het gebruik van selectievakjes.
Ondblclick attribuut
Het ondblclick attribuut voert een script uit wanneer er bijvoorbeeld op een knop wordt dubbel geklikt.
Onfocus attribuut
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.
Oninput attribuut
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.
Oninvalid attribuut
De oninvalid gebeurtenis wordt geactiveerd wanneer een element ongeldig is.
Voorbeeld:
Pin: <input name="pin" id="pin" pattern=".{6,12}"
oninvalid="mijnFunctie()" oninput="setCustomValidity('')" required />
Onkeypress attribuut
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.
Onkeydown attribuut
De onkeydown gebeurtenis wordt geactiveerd wanneer de gebruiker een toets indrukt.
Onkeyup attribuut
De onkeyup gebeurtenis wordt geactiveerd wanneer de gebruiker een toets van het toetsenbord indrukt.
Onmousedown attribuut
De onmousedown gebeurtenis treedt op als de muisknop wordt ingedrukt.
Onmousemove attribuut
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.
Onmouseout attribuut
Met het attribuut onmouseout voer je een actie uit als de gebruiker bijvoorbeeld een tekstvak heeft aangewezen en daarna de muisaanwijzer verplaatst.
Onmouseover attribuut
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.
Voorbeeld:
<img src="images/smiley.jpg"
onmouseover = "src='images/smiley_over.jpg'" onmouseout = "src='images/smiley.jpg'">
Onmouseup attribuut
De onmouseup gebeurtenis treedt op als de ingedrukte muisknop wordt losgelaten.
Onselect attribuut
Het attribuut onselect wordt geactiveerd wanneer de gebruiker in een invoerveld of tekstveld een deel van de tekst selecteert.
Onsubmit attribuut
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.
Onreset attribuut
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.
