HTML adds interactivity with the user through events triggered based on actions in a web browser. Most of these events target JavScript script (event handlers) which can be programmed to do whatever the web developer needs it to do.
The HTML 4.01 specification had defined 19 events. HTML5 added more events. Those which were introduced in HTML5 are labeled “Y” in the tables below.
These are the global event attributes that can be added to HTML elements to define event actions.
Window Events
These are the events triggered by the window object.
| Attribute | HTML5 | Description |
|---|---|---|
| onafterprint | Y | Triggers after a document is printed |
| onbeforeprint | Y | Triggers before a document is printed |
| onbeforeonload | Y | Triggers before a document loads |
| onerror | Y | Triggers when an error occurs |
| onhaschange | Y | Triggers when a document has changed |
| onload | Triggers when a document loads | |
| onmessage | Y | Triggers when a message is triggered |
| onoffline | Y | Triggers when a document goes offline |
| ononline | Y | Triggers when a document comes online |
| onpagehide | Y | Triggers when a window is hidden |
| onpageshow | Y | Triggers when a window becomes visible |
| onpopstate | Y | Triggers when a window’s history changes |
| onredo | Y | Triggers when a document performs a redo |
| onresize | Y | Triggers when a window is resized |
| onstorage | Y | Triggers when a document loads |
| onundo | Y | Triggers when a document performs an undo |
| onunload | Triggers when a user leaves the document |
Form Events
These events are triggered by actions inside an HTML form even though they may apply to almost all HTML elements outside form elements.
| Attribute | HTML5 | Description |
|---|---|---|
| onblur | Y | Triggers when a window loses focus |
| onchange | Triggers when an element changes | |
| oncontextmenu | Y | Triggers when a context menu is triggered |
| onfocus | Triggers when a window gets focus | |
| onformchange | Y | Triggers when a form changes |
| onforminput | Y | Triggers when a form gets user input |
| oninput | Y | Triggers when an element gets user input |
| oninvalid | Y | Triggers when an element is invalid |
| onreset | Triggers when a form is reset | |
| onselect | Triggers when an element is selected | |
| onsubmit | Triggers when a form is submitted |
Keyboard Events
These events are triggered by actions on keyboard keys.
| Attribute | HTML5 | Description |
|---|---|---|
| onkeydown | Triggers when a key is pressed | |
| onkeypress | Triggers when a key is pressed and released | |
| onkeyup | Triggers when a key is released |
Mouse Events
These events are triggered by actions on the mouse movement as well as button presses.
| Attribute | HTML5 | Description |
|---|---|---|
| onclick | Triggers on a mouse click | |
| ondblclick | Triggers on a mouse double-click | |
| onmousedown | Triggers when a mouse button is pressed | |
| onmousemove | Triggers when the mouse pointer moves | |
| onmouseout | Triggers when the mouse pointer moves out of an element | |
| onmouseover | Triggers when the mouse pointer moves over an element | |
| onmouseup | Triggers when a mouse button is released | |
| onmousewheel | (Deprecated use onwheel) Triggers when the mouse wheel is being rotated | |
| onwheel | Triggers when the mouse wheel is being rotated |
Drag Events
These events are triggered by actions on the mouse movements while keys are pressed on a particular element.
| Attribute | HTML5 | Description |
|---|---|---|
| ondrag | Y | Triggers when an element is dragged |
| ondragend | Y | Triggers at the end of a drag operation |
| ondragenter | Y | Triggers when an element has been dragged to a valid drop target |
| ondragleave | Y | Triggers when an element leaves a valid drop target |
| ondragover | Y | Triggers when an element is being dragged over a valid drop target |
| ondragstart | Y | Triggers at the start of a drag operation |
| ondrop | Y | Triggers when a dragged element is being dropped |
| onscroll | Y | Triggers when an element’s scrollbar is being scrolled |
Clipboard Events
These events are triggered when data is added or retrieved from the Clipboard.
| Attribute | HTML5 | Description |
|---|---|---|
| oncopy | Y | Triggered when the user copies the content of an element |
| oncut | Y | Triggered when the user cuts the content of an element |
| onpaste | Y | Triggered when the user pastes some content in an element |
Media Events
These events are triggered by actions on media like videos, images, and audio. They apply to all elements though it is most practical for use on elements such as audio, embed, img, object, and video.
| Attribute | HTML5 | Description |
|---|---|---|
| onabort | Y | Triggers on an abort event |
| oncanplay | Y | Triggers when a media can start play, but might has to stop for buffering |
| oncanplaythrough | Y | Triggers when a media can be played to the end, without stopping for buffering |
| ondurationchange | Y | Triggers when the length of a media is changed |
| onemptied | Y | Triggers when a media resource element suddenly becomes empty |
| onended | Y | Triggers when a media has reached the end |
| onerror | Y | Triggers when an error occurs |
| onloadeddata | Y | Triggers when media data is loaded |
| onloadedmetadata | Y | Triggers when the duration and other media data of a media element is loaded |
| onloadstart | Y | Triggers when the browser starts loading the media data |
| onpause | Y | Triggers when media data is paused |
| onplay | Y | Triggers when media data is going to start playing |
| onplaying | Y | Triggers when media data has started playing |
| onprogress | Y | Triggers when the browser is fetching the media data |
| onratechange | Y | Triggers when the playing rate of media data has changed |
| onreadystatechange | Y | Triggers when the ready-state changes |
| onseeked | Y | Triggers when the seeking attribute of a media element is no longer true, and the seeking has ended |
| onseeking | Y | Triggers when the seeking attribute of a media element is true, and the seeking has begun |
| onstalled | Y | Triggers when there is an error in fetching media data |
| onsuspend | Y | Triggers when the browser has been fetching media data, but stopped before the entire media file was fetched |
| onvolumechange | Y | Triggers when a media changes the volume, also when the volume is set to “mute” |
| ontimeupdate | Y | Triggers when media changes its playing position |
| onwaiting | Y | Triggers when media has stopped playing but is expected to resume |
Misc Events
| Attribute | HTML5 | Description |
|---|---|---|
| ontoggle | Y | Triggered when the user opens or closes the details element |
