Event-attributen in HTML
Voor het uitvoeren van speciale taken kan JavaScript worden ingezet. Denk daarbij aan het berekenen van een weeknummer, een datum conversie, het laten bewegen van een plaatje, enz. Het starten van een dergelijke actie programmeer je zelf.
Het kan ook voorkomen dat je een actie wilt laten starten door iets wat de gebruiker doet, bijvoorbeeld ergens op klikken
of scrollen. Dan is het ook mogelijk dat een actie moet worden gestart op een moment dat je zelf niet in de hand hebt, bijvoorbeeld
als een pagina is geladen.
Scrollen, klikken door de gebruiker, de muis bewegen, de pagina is geladen, zijn gebeurtenissen in de browser. De
gebruikelijke term voor een gebeurtenis is event. Het optreden van een event kun je detecteren en er op laten
reageren met bijv. JavaScript. Zo'n script (of beter: de JavaScript function) heet event handler. Dat is dus de code
die wordt uitgevoerd als een gebeurtenis optreedt.
Je programmeert een event handler door in een HTML-tag een attribuut op te nemen, bijvoorbeeld: onerror="FoutMelding()" Zodra er ergens wat fout gaat treedt het event 'Error' op. In de Engelstalige literatuur spreekt men van "an event is fired' (een gebeurtenis wordt 'afgevuurd').
De naam van een event-attribuut is on met de naam van de gebeurtenis er aan vast, bijvoorbeeld: onload, onmouseover, onresize, enz.
Hieronder vind je een overzicht van event-attributen die je in HTML kunt toepassen. De lijst beperkt zich tot attributen
met een goede ondersteuning in de grote browsers: Edge, Chrome, Firefox, Safari en Opera.
Voor een volledig overzicht verwijs ik naar de event-lijsten op de Dottoro WebReference
en op w3schools.com.
Browsers die een bepaald attribuut niet ondersteunen staan apart vermeld.
| Attribuut | Beschrijving | |
| onbeforeunload |
Script dat wordt uitgevoerd vlak voor de pagina wordt gesloten. |
|
| onblur |
Script dat wordt uitgevoerd als een element de focus verliest, bijvoorbeeld een formulierveld. Dit is het tegenovergestelde
van onfocus. |
|
| onchange |
Script dat wordt uitgevoerd als een element in een document verandert. Dit kan wordt gebruikt met <input>,
<textarea> en <select>. |
|
| onclick |
Script dat wordt uitgevoerd als de muis wordt geklikt. Het gaat hier dan om de linker muistoets. onclick kan niet worden gebruikt met deze tags: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| oncontextmenu |
Script dat wordt uitgevoerd als er op de rechtermuisknop wordt gedrukt. Hiermee kan het 'rechter muisknop menu' worden
veranderd in wat anders. In veel browsers kan deze functie worden uitgeschakeld. |
|
| ondblclick |
Script dat wordt uitgevoerd als de muis wordt gedubbel-klikt. Het gaat hier dan om de linker muistoets.onclick kan niet worden gebruikt met deze tags: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| ondrag |
Script dat wordt uitgevoerd als een element wordt versleept (dragged). |
|
| ondragend |
Script dat wordt uitgevoerd aan het einde van het verslepen van een element. |
|
| ondragenter |
Script dat wordt uitgevoerd als het versleepte element boven een moeglijk doel-element komt. |
|
| ondragleave |
Script dat wordt uitgevoerd als het versleepte element een mogelijk doel-element verlaat. |
|
| ondragover |
Script dat wordt uitgevoerd als het versleepte element zich boven een een mogelijk doel-element bevindt. |
|
| ondragstart |
Script dat wordt uitgevoerd aan het begin van het verslepen van een element. |
|
| ondrop |
Script dat wordt uitgevoerd als het versleepte element op een doel-element wordt gedropt. |
|
| onerror |
Script dat wordt uitgevoerd als er een fout optreedt tijdens het laden van een bestand, bijv. het HTML-document, een JavaScript,
een film- of geluidsbestand, enz. Dit is minder geschikt voor het opvangen van programmeerfouten. Die kunnen beter worden behandeld met een try … catch-constructie,
zie JavaScript debuggen II: Error handler met try en catch.In HTML 4 is al een eenvoudige variant mogelijk, zie JavaScript-fouten tegenhouden. |
|
| onfocus |
Script dat wordt uitgevoerd als een element de focus krijgt, bijvoorbeeld een formulierveld. Dit is het tegenovergestelde
van onblur. |
|
| onfocusin |
Identiek aan onfocus, maar bubbelt niet. |
|
| onfocusout |
Identiek aan onblur, maar bubbelt niet. |
|
| oninput |
Script dat wordt uitgevoerd als een element (lees: formulier-veld) input krijgt, dus als er wat wordt ingetypt. |
|
| onkeydown |
Script dat wordt uitgevoerd als er toets op het toetsenbord wordt ingedrukt. Dit werkt met alle toetsen. onkeydown, onkeypress en onkeyup worden in een vaste volgorde afgehandeld:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onkeypress |
Script dat wordt uitgevoerd als er een toets op het toetsenbord wordt ingedrukt. Dit werkt niet met Control,
Alt, Shift, Escape, enz. Als je die toetsen wel wilt detecteren moet je onkeydown gebruiken.onkeydown, onkeypress en onkeyup worden in een vaste volgorde afgehandeld:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onkeyup |
Script dat wordt uitgevoerd als er een ingedrukte toets op het toetsenbord wordt losgelaten. onkeydown, onkeypress en onkeyup worden in een vaste volgorde afgehandeld:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onload |
Script dat wordt uitgevoerd nadat de hele pagina is geladen. |
|
| onmousedown |
Script dat wordt uitgevoerd als een (willekeurige) muisknop wordt ingedrukt. Bij de linker en middelste muisknop zijn drie events mogelijk: onmousedown, onmouseup en onclick. Deze worden in een vaste volgorde afgehandeld:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onmouseenter |
Identiek aan onmouseover, maar bubbelt niet. |
|
| onmouseleave |
Identiek aan onmouseout, maar bubbelt niet. |
|
| onmousemove |
Script dat wordt uitgevoerd als de muis over een element wordt bewogen. onmousemove kan niet worden gebruikt met deze tags: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onmouseout |
Script dat wordt uitgevoerd als de muis zich niet meer boven een element bevindt. onmouseout kan niet worden gebruikt met deze tags: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onmouseover |
Script dat wordt uitgevoerd als de muis zich boven een element bevindt. onmouseover kan niet worden gebruikt met deze tags: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onmouseup |
Script dat wordt uitgevoerd als een (willekeurige) muisknop wordt losgelaten. Bij de linker en middelste muisknop zijn drie events mogelijk: onmousedown, onmouseup en onclick. Deze worden in een vaste volgorde afgehandeld:
<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style> en <title>. |
|
| onreset | Script dat wordt uitgevoerd als er op de 'reset'
knop in een formulier wordt geklikt. |
|
| onresize |
Script dat wordt uitgevoerd als de grootte van een object verandert. Meestal is dat het window waar de browser in draait. |
|
| onscroll |
Script dat wordt uitgevoerd als de scroll-bar beweegt waardoor het document wordt gescrolled. Dit kan zijn direct met de
scroll-bar, met het muis-wieltje of door een (Java-)script. |
|
| onselect |
Script dat wordt uitgevoerd als één van deze elementen wordt geselecteerd: <input type="file">,
<input type="password">, <input type="text">, <keygen> en <textarea>.
|
|
| onsubmit |
Script dat wordt uitgevoerd als een formulier wordt verstuurd naar de server. onsubmit kan alleen worden gebruikt in de tag
<form>. |
|
| ontouchcancel |
Alleen voor aanraakschermen. Script dat wordt uitgevoerd als de aanraking van het scherm onverwacht / plotseling wordt
afgebroken, bijvoorbeeld als de vinger buiten een 'aanraakbaar' element komt. De parameter event moet verplicht worden
meegegeven in de aan te roepen function. Wordt niet ondersteund door de desktop-versie van Safari en Opera. |
|
| ontouchend |
Alleen voor aanraakschermen. Script dat wordt uitgevoerd als de vinger het scherm loslaat.De parameter event moet
verplicht worden meegegeven in de aan te roepen function. Wordt niet ondersteund door de desktop-versie van Safari en Opera. |
|
| ontouchmove |
Alleen voor aanraakschermen. Script dat wordt uitgevoerd als de vinger over het scherm beweegt. De parameter event
moet verplicht worden meegegeven in de aan te roepen function. Wordt niet ondersteund door de desktop-versie van Safari en Opera. |
|
| ontouchstart |
Alleen voor aanraakschermen. Script dat wordt uitgevoerd als de vinger het scherm aanraakt. De parameter event moet
verplicht worden meegegeven in de aan te roepen function. Wordt niet ondersteund door de desktop-versie van Safari en Opera. |
|
| onunload |
Script dat wordt uitgevoerd als de huidige pagina wordt verlaten of als het browser-window wordt gesloten. Dit heeft een vreemd
bij-effect: als het uit te voeren script in de pagina staat die wordt verlaten, gebeurt er helemaal niets, want het
document waar het script in staat is uit de browser verwijderd …
 |
|
| onwheel |
Script dat wordt uitgevoerd als er aan het muis-wieltje wordt gedraaid. Wordt niet ondersteund door Safari. |
