HTML Event Attributes
Global Event Attributes
One of the new features in HTML 4 is the ability to make HTML events trigger actions in the browser, such as initiating a JavaScript script when a user clicks on an HTML element.
To learn more about event attributes, visit the JavaScript Tutorial
The table below provides standard event attributes that can be inserted into HTML/XHTML elements to define event behaviors.
Window Event Attributes
Triggered by the window (applies to the <body> tag):
| Attribute | Value | Description |
|---|---|---|
| onafterprint New | script | Runs script after the document is printed |
| onbeforeprint New | script | Runs script before the document is printed |
| onbeforeonload New | script | Runs script before the document loads |
| onblur | script | Runs script when the window loses focus |
| onerror New | script | Runs script when an error occurs |
| onfocus | script | Runs script when the window gains focus |
| onhashchange New | script | Runs script when the document changes |
| onload | script | Runs script when the document loads |
| onmessage New | script | Runs script when a message is triggered |
| onoffline New | script | Runs script when the document goes offline |
| ononline New | script | Runs script when the document goes online |
| onpagehide New | script | Runs script when the window is hidden |
| onpageshow New | script | Runs script when the window is visible |
| onpopstate New | script | Runs script when the window's history changes |
| onredo New | script | Runs script when the document performs a redo operation |
| onresize New | script | Runs script when the window is resized |
| onstorage New | script | Runs script when the Web Storage area is updated |
| onundo New | script | Runs script when the document performs an undo operation |
| onunload New | script | Runs script when the user leaves the document |
Form Events
Form events are triggered in HTML forms (applies to all HTML elements, but the element must be within a form):
| Attribute | Value | Description |
|---|---|---|
| onblur | script | Runs script when the element loses focus |
| onchange | script | Runs script when the element changes |
| oncontextmenu New | script | Runs script when the context menu is triggered |
| onfocus | script | Runs script when the element gains focus |
| onformchange New | script | Runs script when the form changes |
| onforminput New | script | Runs script when the form receives user input |
| oninput New | script | Runs script when the element receives user input |
| oninvalid New | script | Runs script when the element is invalid |
| onreset | script | Runs script when the form is reset. Not supported in HTML 5. |
| onselect | script | Runs script when the element is selected |
| onsubmit | script | Runs script when the form is submitted |
Keyboard Events
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Runs script when a key is pressed |
| onkeypress | script | Runs script when a key is pressed and released |
| onkeyup | script | Run script when a key is released |
Mouse Events
Events triggered by mouse actions, similar to user behaviors:
| Property | Value | Description |
|---|---|---|
| onclick | script | Run script when the mouse is clicked |
| ondblclick | script | Run script when the mouse is double-clicked |
| ondrag New | script | Run script when an element is dragged |
| ondragend New | script | Run script when a drag operation ends |
| ondragenter New | script | Run script when an element is dragged over a valid drop target |
| ondragleave New | script | Run script when an element leaves a valid drop target |
| ondragover New | script | Run script when an element is dragged over a valid drop target |
| ondragstart New | script | Run script when a drag operation starts |
| ondrop New | script | Run script when a dragged element is being dropped |
| onmousedown | script | Run script when the 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 the mouse button is released |
| onmousewheel New | script | Run script when the mouse wheel is scrolled |
| onscroll New | script | Run script when the scrollbar of an element is scrolled |
Media Events
Events triggered by videos, images, or audio, often used with HTML media elements like <audio>, <embed>, <img>, <object>, and <video>:
| Property | Value | Description |
|---|---|---|
| onabort | script | Run script when an abort event occurs |
| oncanplay New | script | Run script when the media can start playing but may stop for buffering |
| oncanplaythrough New | script | Run script when the media can play through without stopping for buffering |
| ondurationchange New | script | Run script when the media duration changes |
| onemptied New | script | Run script when the media resource element suddenly becomes empty (network error, loading error, etc.) |
| onended New | script | Run script when the media reaches the end |
| onerror New | script | Run script when an error occurs during the loading of an element |
| onloadeddata New | script | Run script when media data is loaded |
| onloadedmetadata New | script | Run script when the duration and other media data of the media element is loaded |
| onloadstart New | script | Run script when the browser starts loading media data |
| onpause New | script | Run script when the media data is paused |
| onplay New | script | Run script when the media data is about to start playing |
| onplaying New | script | Run script when the media data has started playing |
| onprogress New | script | Run script when the browser is fetching media data |
| onratechange New | script | Run script when the playback rate of the media data changes |
| onreadystatechange New | script | Run script when the ready-state changes |
| onseeked New | script | Run script when the seeking attribute is no longer true and the seeking has ended |
| onseeking New | script | Run script when the seeking attribute is true and the seeking has started |
| onstalled New | script | Run script when an error occurs during the process of retrieving media data (delay) |
| onsuspend New | script | Run script when the browser has stopped retrieving media data before retrieving the entire media file |
| ontimeupdate New | script | Run script when the media changes its playback position |
| onvolumechange New | script | Run script when the media changes volume or when the volume is set to mute |
| onwaiting New | script | Run script when the media has stopped playing but intends to continue playing |
Other Events
| Property | Value | Description |
|---|---|---|
| onshow New | script | Triggered when the <menu> element is displayed in context |
| ontoggle New | script | Triggered when the user opens or closes the <details> element |