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 |