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