HTML5 Event Attributes
The HTML5 event attributes are global and can be applied to most of the elements.
Event Attributes in HTML5
The following event attributes can be applied to the most of the elements for the execution of JavaScript when certain events occur, with some exceptions where it is not relevant such as elements found inside the <head> section, e.g. <title>, <base>, <link> etc.
Window Events
Events related to the window object (applies to the <body> tag):
| Attribute | Value | Description |
|---|---|---|
| onafterprint | script | Fires after the associated document is printed. |
| onbeforeprint | script | Fires before the associated document is printed. |
| onbeforeunload | script | Fires before a document being unloaded. |
| onerror | script | Fires when document errors occur. |
| onhashchange | script | Fires when the fragment identifier part of the document's URL i.e. the portion of a URL that follows the sign (#) changes. |
| onload | script | Fires when the document has finished loading. |
| onmessage | script | Fires when the message event occurs i.e. when user sends a cross-document message or a message is sent from a worker with postMessage() method. See HTML5 Web Workers. |
| onoffline | script | Fires when the network connection fails and the browser starts working offline. |
| ononline | script | Fires when the network connections returns and the browser starts working online. |
| onpagehide | script | Fires when the page is hidden, such as when a user is moving to another webpage. |
| onpageshow | script | Fires when the page is shown, such as when a user navigates to a webpage. |
| onpopstate | script | Fires when changes are made to the active history. |
| onresize | script | Fires when the browser window is resized. |
| onstorage | script | Fires when a Web Storage area is updated. |
| onunload | script | Fires immediately before the document is unloaded or the browser window is closed. |
Form Events
Events that occur due to the user interacting with the HTML form controls.
| Attribute | Value | Description |
|---|---|---|
| onblur | script | Fires when an element loses focus. |
| onchange | script | Fires when the value or state of the element is changed. |
| onfocus | script | Fires when the element receives focus. |
| oninput | script | Fires when the value of an element is changed by the user. |
| oninvalid | script | Fires when a submittable element do not satisfy their constraints during form validation. |
| onreset | script | Fires when the user resets a form. |
| onselect | script | Fires when some text is being selected or the current selection is changed by the user. |
| onsearch | script | Fires when the user writes something in a search input field. |
| onsubmit | script | Fires when a form is submitted. |
Mouse Events
Events that occur due to the user interacting with a pointing device such as a mouse:
| Attribute | Value | Description |
|---|---|---|
| onclick | script | Fires when the user clicks the left mouse button on the element. |
| ondblclick | script | Fires when the user double-clicks on the element. |
| oncontextmenu | script | Fires when a context menu is triggered by the user through right-click on the element. |
| ondrag | script | Fires when the user drags an element. The ondrag event fires throughout the drag operation. |
| ondragend | script | Fires when the user releases the mouse button at the end of a drag operation. |
| ondragenter | script | Fires when the user drags an element to a valid drop target. |
| ondragleave | script | Fires when an element leaves a valid drop target during a drag operation. |
| ondragover | script | Fires when an element is being dragged over a valid drop target. |
| ondragstart | script | Fires when the user starts to drag a text selection or selected element. |
| ondrop | script | Fires when the mouse button is released during a drag-and-drop operation i.e. when dragged element is being dropped. |
| onmousedown | script | Fires when the mouse button is pressed over an element. |
| onmousemove | script | Fires when the user moves the mouse pointer over an element. |
| onmouseout | script | Fires when the user moves the mouse pointer outside the boundaries of an element. |
| onmouseover | script | Fires when the user moves the mouse pointer onto an element. |
| onmouseup | script | Fires when the user releases the mouse button while the mouse is over an element. |
| onmousewheel | script | Deprecated Use the onwheel attribute instead. |
| onscroll | script | Fires when the user scrolls the contents of an element by scrolling the element's scrollbar. |
| onshow | script | Fires when a contextmenu event was fired onto an element that has a contextmenu attribute. |
| ontoggle | script | Fires when the user opens or closes the <details> element. |
| onwheel | script | Fires when the user scrolls the contents of an element by rolling the mouse wheel up or down over an element. |
Keyboard Events
Events that occur by the user interaction with the keyboard:
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Fires when the user presses a key. |
| onkeypress | script | Fires when the user presses an alphanumeric key. |
| onkeyup | script | Fires when the user releases a key. |
Clipboard Events
Events related to modification of the clipboard, that is copy, cut and paste:
| Attribute | Value | Description |
|---|---|---|
| oncopy | script | Fires when the user copies the element or selection, adding it to the system clipboard. |
| oncut | script | Fires when the element or selection is removed from the document and added to the system clipboard. |
| onpaste | script | Fires when the user pastes data, transferring the data from the system clipboard to the document. |
Media Events
Events that occur when handling media elements that are embedded inside the HTML documents, such as <audio> and <video> elements:
| Attribute | Value | Description |
|---|---|---|
| onabort | script | Fires when playback is aborted, but not due to an error. |
| oncanplay | script | Fires when enough data is available to play the media, at least for a couple of frames, but would require further buffering. |
| oncanplaythrough | script | Fires when entire media can be played to the end without requiring to stop for further buffering. |
| oncuechange | script | Fires when the text track cue in a <track> element changes. |
| ondurationchange | script | Fires when the duration of the media changes. |
| onemptied | script | Fires when the media element is reset to its initial state, either because of a fatal error during load, or because the load() method is called to reload it. |
| onended | script | Fires when the end of playback is reached. |
| onerror | script | Fires when an error occurs while fetching the media data. |
| onloadeddata | script | Fires when media data is loaded at the current playback position. |
| onloadedmetadata | script | Fires when metadata of the media (like duration and dimensions) has finished loading. |
| onloadstart | script | Fires when loading of the media begins. |
| onpause | script | Fires when playback is paused, either by the user or programmatically. |
| onplay | script | Fires when playback of the media starts after having been paused i.e. when the play() method is requested. |
| onplaying | script | Fires when the audio or video has started playing. |
| onprogress | script | Fires periodically to indicate the progress while downloading the media data. |
| onratechange | script | Fires when the playback rate or speed is increased or decreased, like slow motion or fast forward mode. |
| onseeked | script | Fires when the seek operation ends. |
| onseeking | script | Fires when the current playback position is moved. |
| onstalled | script | Fires when the download has stopped unexpectedly. |
| onsuspend | script | Fires when the loading of the media is intentionally stopped. |
| ontimeupdate | script | Fires when the playback position changed, like when the user fast forwards to a different playback position. |
| onvolumechange | script | Fires when the volume is changed, or playback is muted or unmuted. |
| onwaiting | script | Fires when playback stops because the next frame of a video resource is not available. |
Note: The event attributes described above, however applied to all the HTML elements, though they are not useful for all elements. For example, only media elements will receive a volumechange event fired by the browser.
