HTML Event Attributes
HTML has the ability to let events trigger actions in a browser, such as starting a JavaScript when a user clicks on an element. To learn more about programming events, you can visit our JavaScript tutorial. Below are the global event attributes that can be added to HTML elements to define event actions.
Window Event Attributes
Window event attributes are triggered for the window object and apply to the <body> tag. These attributes define actions that should occur in response to various events, such as when the document is printed, when the document is about to be unloaded, when an error occurs, and more.
| Attribute | Value | Description |
|---|---|---|
| onafterprint | script | Executes a script after the document is printed |
| onbeforeprint | script | Executes a script before the document is printed |
| onbeforeunload | script | Executes a script when the document is about to be unloaded |
| onerror | script | Executes a script when an error occurs |
| onhashchange | script | Executes a script when there have been changes to the anchor part of a URL |
| onload | script | Fires after the page is finished loading |
| onmessage | script | Executes a script when the message is triggered |
| onoffline | script | Executes a script when the browser starts to work offline |
| ononline | script | Executes a script when the browser starts to work online |
| onpagehide | script | Executes a script when a user navigates away from a page |
| onpageshow | script | Executes a script when a user navigates to a page |
| onpopstate | script | Executes a script when the window’s history changes |
| onresize | script | Fires when the browser window is resized |
| onstorage | script | Executes a script when a Web Storage area is updated |
| onunload | script | Fires once a page has unloaded (or the browser window has been closed) |
Form Events
Form events are triggered by actions inside a HTML form. These events apply to almost all HTML elements, but are most commonly used in form elements. They define actions that should occur in response to various events, such as when the element loses focus, when the value of the element changes, when a context menu is triggered, and more.
| Attribute | Value | Description |
|---|---|---|
| onblur | script | Fires the moment that the element loses focus |
| onchange | script | Fires the moment when the value of the element is changed |
| oncontextmenu | script | Executes a script when a context menu is triggered |
| onfocus | script | Fires the moment when the element gets focus |
| oninput | script | Executes a script when an element gets user input |
| oninvalid | script | Executes a script when an element is invalid |
| onreset | script | Fires when the Reset button in a form is clicked |
| onsearch | script | Fires when the user writes something in a search field (for <input="search">) |
| onselect | script | Fires after some text has been selected in an element |
| onsubmit | script | Fires when a form is submitted |
Keyboard Events
Keyboard events are triggered in response to user interactions with the keyboard. These events define actions that should occur when a user presses a key, releases a key, and more.
| Attribute | Value | Description |
|---|---|---|
| onkeydown | script | Fires when a user is pressing a key |
| onkeypress | script | Fires when a user presses a key |
| onkeyup | script | Fires when a user releases a key |
Mouse Events
Mouse events are triggered in response to user interactions with the mouse. These events define actions that should occur when a mouse click occurs on the element, when the mouse pointer moves over an element, when a mouse button is released over an element, and more.
| Attribute | Value | Description |
|---|---|---|
| onclick | script | Fires on a mouse click on the element |
| ondblclick | script | Fires on a mouse double-click on the element |
| onmousedown | script | Fires when a mouse button is pressed down on an element |
| onmousemove | script | Fires when the mouse pointer is moving while it is over an element |
| onmouseout | script | Fires when the mouse pointer moves out of an element |
| onmouseover | script | Fires when the mouse pointer moves over an element |
| onmouseup | script | Fires when a mouse button is released over an element |
| onmousewheel | script | Deprecated. Use the onwheel attribute instead |
| onwheel | script | Fires when the mouse wheel rolls up or down over an element |
Drag Events
Drag events are triggered in response to user interactions involving dragging elements. These events define actions that should occur when an element is dragged, when a drag operation ends, when an element is dragged to a valid drop target, and more.
| Attribute | Value | Description |
|---|---|---|
| ondrag | script | Executes a script when an element is dragged |
| ondragend | script | Executes a script at the end of a drag operation |
| ondragenter | script | Executes a script when an element has been dragged to a valid drop target |
| ondragleave | script | Executes a script when an element leaves a valid drop target |
| ondragover | script | Executes a script when an element is being dragged over a valid drop target |
| ondragstart | script | Executes a script at the start of a drag operation |
| ondrop | script | Executes a script when dragged element is being dropped |
| onscroll | script | Executes a script when an element’s scrollbar is being scrolled |
Clipboard Events
Clipboard events are triggered in response to user interactions involving the clipboard. These events define actions that should occur when the user copies the content of an element, cuts the content of an element, pastes some content in an element, and more.
| Attribute | Value | Description |
|---|---|---|
| oncopy | script | Fires when the user copies the content of an element |
| oncut | script | Fires when the user cuts the content of an element |
| onpaste | script | Fires when the user pastes some content in an element |
Media Events
Media events are triggered by media elements like videos, images, and audio. These events define actions that should occur in response to various events, such as when the media has reached the end, when an error occurs when the file is being loaded, when the media is paused, and more.
| Attribute | Value | Description |
|---|---|---|
| onabort | script | Fires when the loading of an audio/video is aborted |
| oncanplay | script | Fires when the browser can start playing the audio/video |
| oncanplaythrough | script | Fires when the browser can play through the audio/video without stopping for buffering |
| ondurationchange | script | Fires when the duration of the audio/video is changed |
| onemptied | script | Fires when the current playlist is empty |
| onended | script | Fires when the current playlist is ended |
| onerror | script | Fires when an error occurred during the loading of an audio/video |
| onloadeddata | script | Fires when the browser has loaded the current frame of the audio/video |
| onloadedmetadata | script | Fires when the browser has loaded meta data for the audio/video |
| onloadstart | script | Fires when the browser starts looking for the audio/video |
| onpause | script | Fires when the audio/video has been paused |
| onplay | script | Fires when the audio/video has been started or is no longer paused |
| onplaying | script | Fires when the audio/video is playing after having been paused or stopped for buffering |
| onprogress | script | Fires when the browser is downloading the audio/video |
| onratechange | script | Fires when the playing speed of the audio/video is changed |
| onseeked | script | Fires when the user is finished moving/skipping to a new position in the audio/video |
| onseeking | script | Fires when the user starts moving/skipping to a new position in the audio/video |
| onstalled | script | Fires when the browser is trying to get media data, but data is not available |
| onsuspend | script | Fires when the browser is intentionally not getting media data |
| ontimeupdate | script | Fires when the current playback position has changed |
| onvolumechange | script | Fires when the volume has been changed |
| onwaiting | script | Fires when the video stops because it needs to buffer the next frame |
Miscellaneous Events
Miscellaneous events include any events that do not fall into the categories above. For example, the ontoggle event fires when the user opens or closes the <details> element.
| Attribute | Value | Description |
|---|---|---|
| ontoggle | script | Fires when the user opens or closes the <details> element |
Please note that the “Value” column in the tables above refers to the script that is executed when the event is triggered.
