HTML 5 Event Handler Content Attributes
When your users visit your website, they do things like click on things, hover over things etc. These are examples of what JavaScript calls events. Within your HTML, you can respond to an event using an event handler attribute. You can attach an event handler content attribute to the HTML element for which you want to respond to when a specific event occurs. For example, you could attach the onMouseover event handler attribute to a button and specify some JavaScript to run whenever the user hovers over the button.
Event handler content attributes are often referred to simply as "event handlers". Here are the event handlers that HTML5 supports.
Event Handlers for All HTML5 Elements & document & window Objects
This table includes the event handlers that can be used in all HTML5 elements as both content attributes and IDL attributes, and on Document and Window objects, as IDL attributes.
| Attribute | Description |
|---|---|
| onabort | Invoked when an event has been aborted. For example, the browser stops fetching media data before it is completely downloaded. |
| oncancel | cancel event handler. |
| oncanplay | Invoked when the browser/user agent can start playing media, but hasn't yet, due to buffering. In other words, if playback were to begin now, it wouldn't play right to the end (due to the current playback rate) - it would need to pause during playback in order to load the rest of the media. |
| oncanplaythrough | The browser/user agent estimates that if playback were to begin now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering. |
| onchange | User has changed the object, then attempts to leave that field (i.e. clicks elsewhere). |
| onclick | Invoked when the user clicked on the object. |
| onclose | close event handler. |
| oncontextmenu | Invoked when a context menu has been triggered. |
| oncuechange | cuechange event handler. |
| ondblclick | Invoked when the user clicked twice on the object. |
| ondrag | Invoked when an element is being dragged. |
| ondragend | Invoked when an element has stopped being dragged. |
| ondragenter | Invoked when an element has been dragged to a drop target. |
| ondragleave | Invoked when an element leaves a valid drop target. |
| ondragover | Invoked when an element is being dragged over a valid drop target. |
| ondragstart | Invoked when a drag operation has started. |
| ondrop | Invoked when an element is being dropped. |
| ondurationchange | Invoked when the length of the media is changed (i.e. the duration attribute has just been updated). |
| onemptied | Invoked when a media resource element suddenly becomes empty (for example, due to a network error). |
| onended | Invoked when the media has reached the end. |
| oninput | input event handler. |
| oninvalid | invalid event handler. |
| onkeydown | Invoked when a key was pressed over an element. |
| onkeypress | Invoked when a key was pressed over an element then released. |
| onkeyup | Invoked when a key was released over an element. |
| onloadeddata | Invoked when the browser/user agent can render the media data at the current playback position for the first time. |
| onloadedmetadata | Invoked when the browser/user agent has just determined the duration and dimensions of the media resource. |
| onloadstart | Invoked when the browser/user agent has started loading the media resource. |
| onmousedown | The cursor moved over the object and mouse/pointing device was pressed down. |
| onmousemove | The cursor moved while hovering over an object. |
| onmouseout | The cursor moved off the object |
| onmouseover | The cursor moved over the object (i.e. user hovers the mouse over the object). |
| onmouseup | The mouse/pointing device was released after being pressed down. |
| onmousewheel | Invoked when the mouse wheel is being rotated. |
| onpause | Invoked when the media resource has been paused. |
| onplay | Invoked when the media resource starts playback. |
| onplaying | Playback has begun. |
| onprogress | The browser/user agent is fetching media data the. |
| onratechange | Invoked when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated). |
| onreset | reset event handler. |
| onseeked | Invoked when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true) |
| onseeking | Invoked when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event. |
| onselect | Invoked when some or all of the contents of an object is selected. For example, the user selected some text within a text field. |
| onshow | show event handler. |
| onstalled | Invoked when the browser/user agent is trying to fetch media data but the data has stalled (i.e. the data has stopped coming). |
| onsubmit | User submitted a form. |
| onsuspend | The browser/user agent is (intentionally) not currently fetching media data, but has not yet downloaded the entire media resource (i.e. it has suspended the download). |
| ontimeupdate | Invoked when the media's current playback position changed. |
| onvolumechange | Invoked when either the volume attribute or the muted attribute has changed. |
| onwaiting | The next frame of the media is not yet available (but the browser/user agent expects it to become available). |
Event Handlers for body Element & document Objects
Can be used on any HTML5 element other than the <body> element, as both content attributes and IDL attributes, and on Document objects, as IDL attributes:
| Attribute | Description |
|---|---|
| onblur | User has left the focus of the element. |
| onerror | Invoked when an error occurs while the Window object is being loaded. Also handler for script error notifications. |
| onfocus | Invoked when the focus is on the element. |
| onload | The element has loaded. |
| onscroll | scroll event handler. Invoked when the element's scrollbar is being scrolled. |
Event Handlers for window Objects & body & frameset Elements
Can be used on Window objects, as IDL attributes on the Window object, and with corresponding content attributes and IDL attributes exposed on the <body> and frameset elements.
Note that the frameset element is obsolete in HTML5, but is was valid in HTML version 4. To learn more about this HTML 4 element, see <frameset>.
| Attribute | Description |
|---|---|
| onafterprint | afterprint event handler |
| onbeforeprint | beforeprint event handler |
| onbeforeunload | beforeunload event handler |
| onblur | User has left the focus of the element. |
| onerror | Invoked when an error occurs while the element is being loaded. Also handler for script error notifications. |
| onfocus | Invoked when the focus is on the element. |
| onhashchange | hashchange event handler. The hashchange event is fired when navigating to a session history entry whose URL differs from that of the previous one only in the fragment identifier. |
| onload | The element has loaded. |
| onmessage | message event handler. |
| onoffline | offline event handler. |
| ononline | online event handler. |
| onpagehide | pagehide event handler. The pagehide event is fired when traversing from a session history entry. |
| onpageshow | pageshow event handler. The pageshow event is fired when traversing to a session history entry. |
| onpopstate | popstate event handler. The popstate event is fired when navigating to a session history entry that represents a state object. |
redo event handler. This is used for "redoing" an "undo" operation. For example, the user accidentally selected "Undo", so decides to correct this by using "Redo". Also see onundo below. |
|
| onresize | resize event handler. |
| onscroll | scroll event handler. Invoked when the element's scrollbar is being scrolled. |
| onstorage | storage event handler. |
undo event handler for Window object. This could be used when the user clicks an "Undo" button or similar. For example, a web mail application could keep track of the fact that a user has deleted an email from the inbox, so that the user can "undo" the action and have the email return to the inbox. |
|
| onunload | unload event handler. |
Event Handlers for document Objects Only
Can be used on Document objects as IDL attributes:
| Attribute | Description |
|---|---|
| onreadystatechange | readystatechange event handler. |