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, when the user clicks on an HTML element to start a piece of JavaScript.

If you want to learn more about event attributes, please visit the JavaScript tutorial

The following table provides standard event attributes, which can be inserted into HTML/XHTML elements to define event behavior.

New : HTML5 new attribute event.


Window Event Attributes

The event is triggered by the window (applicable to the <body> tag):

AttributesValueDescription
onafterprintNewscriptRun the script after printing the document
onbeforeprintNewscriptRun the script before the document is printed
onbeforeonloadNewscriptRun the script before the document is loaded
onblurscriptRun script when window loses focus
onerrorNewscriptRun the script when an error occurs
onfocusscriptRun the script when the window gains focus
onhashchangeNewscriptRun the script when the document changes
onloadscriptRun the script when the document is loaded
onmessageNewscriptRun the script when the message is triggered
onofflineNewscriptRun script when document is offline
ononlineNewscriptRun the script when the document is online
onpagehideNewscriptRun script when window is hidden
onpageshowNewscriptRun the script when the window is visible
onpopstateNewscriptRun script when window history changes
onredoNewscriptRun the script when the document is executed and re-execute the operation (redo)
onresizeNewscriptRun the script when the window is resized
onstorageNewscriptRun the script when the Web Storage area is updated (when the data in the storage space changes)
onundoNewscriptRun the script when the document is undone
onunloadNewscriptRun the script when the user leaves the document



Form Events

The form event is triggered in the HTML form (applicable to all HTML elements, but the HTML element needs to be in the form form):

AttributesValueDescription
onblurscriptRun the script when the element loses focus
onchangescriptRun the script when the element changes
oncontextmenuNewscriptRun the script when the context menu is triggered
onfocusscriptRun the script when the element gains focus
onformchangeNewscriptRun the script when the form changes
onforminputNewscriptRun the script when the form gets user input
oninputNewscriptRun the script when the element gets user input
oninvalidNewscriptRun the script when the element is invalid
onresetscriptRun the script when the form is reset. HTML 5 does not support.
onselectscriptRun the script when the element is selected
onsubmitscriptRun the script when the form is submitted



Keyboard Events

AttributesValueDescription
onkeydownscriptRun script when key is pressed
onkeypressscriptRun script when key is pressed and released
onkeyupscriptRun the script when the key is released



Mouse Events

Trigger events through the mouse, similar to the user's behavior:

AttributesValueDescription
onclickscriptRun the script when the mouse is clicked
ondblclickscriptRun the script when the mouse is double clicked
ondragNewscriptRun script when dragging element
ondragendNewscriptRun the script when the drag operation ends
ondragenterNewscriptRun the script when the element is dragged to a valid drop target
ondragleaveNewscriptRun the script when the element leaves the effective drag and drop target
ondragoverNewscriptRun the script when the element is dragged above the effective drop target
ondragstartNewscriptRun the script when the drag operation starts
ondropNewscriptRun the script when the dragged element is being dragged and dropped
onmousedownscriptRun the script when the mouse button is pressed
onmousemovescriptRun the script when the mouse pointer moves
onmouseoutscriptRun the script when the mouse pointer moves out of the element
onmouseoverscriptRun the script when the mouse pointer moves over the element
onmouseupscriptRun the script when the mouse button is released
onmousewheelNewscriptRun the script when the mouse wheel is turned
onscrollNewscriptRun the script when scrolling the scroll bar of an element



Media Events

This event is triggered by videos, images or audio. It is mostly applied to HTML media elements such as <audio>, <embed>, <img>, <object>, and <video>:

AttributesValueDescription
onabortscriptRun the script when an abort event occurs
oncanplayNewscriptRun the script when the media can start playing but may need to be stopped due to buffering
oncanplaythroughNewscriptRun the script when the media can be played to the end without stopping due to buffering
ondurationchangeNewscriptRun script when media length changes
onemptiedNewscriptRun the script when the media resource element is suddenly empty (network error, loading error, etc.)
onendedNewscriptRun the script when the medium has reached the end
onerrorNewscriptRun the script when an error occurs during element loading
onloadeddataNewscriptRun script when media data is loaded
onloadedmetadataNewscriptRun the script when the duration of the media element and other media data have been loaded
onloadstartNewscriptRun the script when the browser starts to load the media data
onpauseNewscriptRun script when media data is paused
onplayNewscriptRun the script when the media data is about to start playing
onplayingNewscriptRun the script when the media data has started to play
onprogressNewscriptRun the script when the browser is fetching media data
onratechangeNewscriptRun the script when the playback rate of the media data changes
onreadystatechangeNewscriptRun the script when the ready-state changes
onseekedNewscriptRun the script when the positioning attribute [1] of the media element is no longer true and the positioning has ended
onseekingNewscriptRun the script when the positioning attribute of the media element is true and the positioning has started
onstalledNewscriptRun the script when there is an error in the process of retrieving media data (delayed)
onsuspendNewscriptRun the script when the browser is already fetching media data but stops before retrieving the entire media file
ontimeupdateNewscriptRun a script when the media changes its playback position
onvolumechangeNewscriptRun the script when the medium changes the volume or when the volume is set to mute
onwaitingNewscriptRun a script when the media has stopped playing but intends to continue playing


Other Events

AttributesValueDescrption
onshowNewscriptTriggered when the <menu> element is displayed in the context
ontoggleNewscriptTriggered when the user opens or closes the <details> element