HTML Event Attributes
Global Event Attributes
One of the new features of HTML 4 is the ability to make HTML events trigger behaviors in the browser, for example, starting a piece of JavaScript when a user clicks an HTML element.
If you want to learn more about event attributes, please visitJavaScript Tutorial
The table below provides standard event attributes that can be inserted into HTML/XHTML elements to define event behavior.
New: HTML5-added event attributes.
Window Event Attributes
The event is triggered by the window (applicable to the <body> tag):
| Attributes | Value | Description |
|---|---|---|
| onafterprintNew | script | Run script after printing a document |
| onbeforeprintNew | script | Run script before printing a document |
| onbeforeonloadNew | script | Run script before the document loads |
| onblur | script | Run script when the window loses focus |
| onerrorNew | script | Run script when an error occurs |
| onfocus | script | Run script when the window gains focus |
| onhashchangeNew | script | Run script when the document changes |
| onload | script | Run script when the document loads |
| onmessageNew | script | Run script when a message is triggered |
| onofflineNew | script | Run script when the document goes offline |
| ononlineNew | script | Run script when the document goes online |
| onpagehideNew | script | Run script when the window is hidden |
| onpageshowNew | script | Run script when the window is visible |
| onpopstateNew | script | Run script when the window history changes |
| onredoNew | script | Run script when the document performs a redo operation |
| onresizeNew | script | Run script when the window is resized |
| onstorageNew | script | Run script when the Web Storage area updates (when data in the storage space changes) |
| onundoNew | script | Run script when the document performs an undo operation |
| onunloadNew | script | Run script when the user leaves the document |
Form Events
Form events are triggered in HTML forms (applicable to all HTML elements, but the HTML element must be inside a form):
| Attributes | Value | Description |
|---|---|---|
| onblur | script | Run script when an element loses focus |
| onchange | script | Run script when an element changes |
| oncontextmenuNew | script | Run script when the context menu is triggered |
| onfocus | script | Run script when an element gains focus |
| onformchangeNew | script | Run script when the form changes |
| onforminputNew | script | Run script when the form receives user input |
| oninputNew | script | Run script when an element receives user input |
| oninvalidNew | script | Run script when an element is invalid |
| onreset | script | Run script when the form is reset.Not supported in HTML 5. |
| onselect | script | Run script when an element is selected |
| onsubmit | script | Run script when the form is submitted |
Keyboard Events
| Attributes | Value | Description |
|---|---|---|
| onkeydown | script | Run script when a key is pressed |
| onkeypress | script | Run script when a key is pressed and released |
| onkeyup | script | Run script when a key is released |
Mouse Events
Events triggered by the mouse, similar to user actions:
| Attributes | Value | Description |
|---|---|---|
| onclick | script | Run script when the mouse is clicked |
| ondblclick | script | Run script when the mouse is double-clicked |
| ondragNew | script | Run script when an element is dragged |
| ondragendNew | script | Run script when a drag operation ends |
| ondragenterNew | script | Run script when an element is dragged onto a valid drop target |
| ondragleaveNew | script | Run script when an element leaves a valid drop target |
| ondragoverNew | script | Run script when an element is dragged over a valid drop target |
| ondragstartNew | script | Run script when a drag operation begins |
| ondropNew | script | Run script when a dragged element is being dropped |
| onmousedown | script | Run script when a mouse button is pressed |
| onmousemove | script | Run script when the mouse pointer moves |
| onmouseout | script | Run script when the mouse pointer moves out of an element |
| onmouseover | script | Run script when the mouse pointer moves over an element |
| onmouseup | script | Run script when a mouse button is released |
| onmousewheelNew | script | Run script when the mouse wheel is rotated |
| onscrollNew | script | Run script when an element's scrollbar is scrolled |
Media Events
This event is triggered by videos, images, or audio, and is mostly applied to HTML media elements such as <audio>, <embed>, <img>, <object>, and <video>:
| Attributes | Value | Description |
|---|---|---|
| onabort | script | Run script when an abort event occurs |
| oncanplayNew | script | Run script when the media can start playing but may need to stop for buffering |
| oncanplaythroughNew | script | Run script when the media can play to the end without stopping for buffering |
| ondurationchangeNew | script | Run script when the media length changes |
| onemptiedNew | script | Run script when the media resource element suddenly becomes empty (network error, loading error, etc.) |
| onendedNew | script | Run script when the media reaches the end |
| onerrorNew | script | Run script when an error occurs during element loading |
| onloadeddataNew | script | Run script when loading media data |
| onloadedmetadataNew | script | Run script when the media element's duration and other media data have been loaded |
| onloadstartNew | script | Run script when the browser starts loading media data |
| onpauseNew | script | Run script when media data is paused |
| onplayNew | script | Run script when media data is about to start playing |
| onplayingNew | script | Run script when media data has started playing |
| onprogressNew | script | Run script when the browser is fetching media data |
| onratechangeNew | script | Run script when the playback rate of media data changes |
| onreadystatechangeNew | script | Run script when the ready-state changes |
| onseekedNew | script | Run script when the media element's seeking attribute |
| onseekingNew | script | Run script when the media element's seeking attribute is true and seeking has started |
| onstalledNew | script | Run script when an error occurs while retrieving media data (delay) |
| onsuspendNew | script | Run script when the browser stops fetching media data before retrieving the entire media file |
| ontimeupdateNew | script | Run script when the media changes its playback position |
| onvolumechangeNew | script | Run script when the media changes volume or when volume is set to mute |
| onwaitingNew | script | Run script when the media has stopped playing but intends to continue playing |
Other Events
| Attributes | Value | Description |
|---|---|---|
| onshowNew | script | Triggered when the <menu> element is displayed in a context |
| ontoggleNew | script | Triggered when the user opens or closes the <details> element |