Contents
Global Event Attributes
HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element.
Below are the global event attributes that can be added to HTML elements to define event actions.
New : New event attributes in HTML5.
Window Event Attributes
Events triggered for the window object (applies to the <body> tag):
| Attribute | HTML4 | HTML5 | Description |
|---|---|---|---|
| onafterprint | Script to be run after the document is printed | ||
| onbeforeprint | Script to be run before the document is printed | ||
| onbeforeunload | Script to be run before the document is unloaded | ||
| onerror | Script to be run when an error occur | ||
| onhaschange | Script to be run when the document has changed | ||
| onload | Fires after the page is finished loading | ||
| onmessage | Script to be run when the message is triggered | ||
| onoffline | Script to be run when the document goes offline | ||
| ononline | Script to be run when the document comes online | ||
| onpagehide | Script to be run when the window is hidden | ||
| onpageshow | Script to be run when the window becomes visible | ||
| onpopstate | Script to be run when the window’s history changes | ||
| onredo | Script to be run when the document performs a redo | ||
| onresize | Fires when the browser window is resized | ||
| onstorage | Script to be run when a Web Storage area is updated | ||
| onundo | Script to be run when the document performs an undo | ||
| onunload | Fires once a page has unloaded (or the browser window has been closed) |
Form Events
Events triggered by actions inside a HTML form (applies to almost all HTML elements, but is most used in form elements):
| Attribute | HTML4 | HTML5 | Description |
|---|---|---|---|
| onblur | Fires the moment that the element loses focus | ||
| onchange | Fires the moment when the value of the element is changed | ||
| oncontextmenu | Script to be run when a context menu is triggered | ||
| onfocus | Fires the moment when the element gets focus | ||
| onformchange | Script to be run when a form changes | ||
| onforminput | Script to be run when a form gets user input | ||
| oninput | Script to be run when an element gets user input | ||
| oninvalid | Script to be run when an element is invalid | ||
| onreset | Fires when the Reset button in a form is clicked Not supported in HTML5 | ||
| onselect | Fires after some text has been selected in an element | ||
| onsubmit | Fires when a form is submitted |
Keyboard Events
| Attribute | HTML4 | HTML5 | Description |
|---|---|---|---|
| onkeydown | Fires when a user is pressing a key | ||
| onkeypress | Fires when a user presses a key | ||
| onkeyup | Fires when a user releases a key |
Mouse Events
Events triggered by a mouse, or similar user actions:
| Attribute | HTML4 | HTML5 | Description |
|---|---|---|---|
| onclick | Fires on a mouse click on the element | ||
| ondblclick | Fires on a mouse double-click on the element | ||
| ondrag | Script to be run when an element is dragged | ||
| ondragend | Script to be run at the end of a drag operation | ||
| ondragenter | Script to be run when an element has been dragged to a valid drop target | ||
| ondragleave | Script to be run when an element leaves a valid drop target | ||
| ondragover | Script to be run when an element is being dragged over a valid drop target | ||
| ondragstart | Script to be run at the start of a drag operation | ||
| ondrop | Script to be run when dragged element is being dropped | ||
| onmousedown | Fires when a mouse button is pressed down on an element | ||
| onmousemove | Fires when the mouse pointer moves over an element | ||
| onmouseout | Fires when the mouse pointer moves out of an element | ||
| onmouseover | Fires when the mouse pointer moves over an element | ||
| onmouseup | Fires when a mouse button is released over an element | ||
| onmousewheel | Script to be run when the mouse wheel is being rotated | ||
| onscroll | Script to be run when an element’s scrollbar is being scrolled |
Media Events
Events triggered by medias like videos, images and audio (applies to all HTML elements, but is most common in media elements, like <audio>, <embed>, <img>, <object>, and <video>):
| Attribute | HTML4 | HTML5 | Description |
|---|---|---|---|
| onabort | Script to be run on abort | ||
| oncanplay | Script to be run when a file is ready to start playing (when it has buffered enough to begin) | ||
| oncanplaythrough | Script to be run when a file can be played all the way to the end without pausing for buffering | ||
| ondurationchange | Script to be run when the length of the media changes | ||
| onemptied | Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects) | ||
| onended | Script to be run when the media has reach the end (a useful event for messages like “thanks for listening”) | ||
| onerror | Script to be run when an error occurs when the file is being loaded | ||
| onloadeddata | Script to be run when media data is loaded | ||
| onloadedmetadata | Script to be run when meta data (like dimensions and duration) are loaded | ||
| onloadstart | Script to be run just as the file begins to load before anything is actually loaded | ||
| onpause | Script to be run when the media is paused either by the user or programmatically | ||
| onplay | Script to be run when the media is ready to start playing | ||
| onplaying | Script to be run when the media actually has started playing | ||
| onprogress | Script to be run when the browser is in the process of getting the media data | ||
| onratechange | Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode) | ||
| onreadystatechange | Script to be run each time the ready state changes (the ready state tracks the state of the media data) | ||
| onseeked | Script to be run when the seeking attribute is set to false indicating that seeking has ended | ||
| onseeking | Script to be run when the seeking attribute is set to true indicating that seeking is active | ||
| onstalled | Script to be run when the browser is unable to fetch the media data for whatever reason | ||
| onsuspend | Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason | ||
| ontimeupdate | Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media) | ||
| onvolumechange | Script to be run each time the volume is changed which (includes setting the volume to “mute”) | ||
| onwaiting | Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data) |
