Web.QHMIT.com

JavaScript Event Handlers

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. Using JavaScript, you can respond to an event using Event Handlers. You can attach an event handler 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 to a button and specify some JavaScript to run whenever this event occurs against that button.

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.
oncuechange cuechange event handler.
ondblclick Invoked when the user clicked twice on the object.
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.
onmouseenter The cursor enters the outer element (not the inner element). Therefore, does not fire again if the cursor enters a descendant of this element.
onmouseleave The cursor leaves the element.
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.
ontoggle Invoked when the details element is opened or closed.
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 - Specific Rules

Some event handlers have more specific rules. The following event handler attributes are subject to the following rules:

...must be supported by all HTML elements other than body and frameset elements, as both event handler content attributes and event handler IDL attributes; that must be supported by all Document objects, as event handler IDL attributes; and that must be supported by all Window objects, as event handler IDL attributes on the Window objects themselves, and with corresponding event handler content attributes and event handler IDL attributes exposed on all body and frameset elements that are owned by that Window object's Documents:

For more information, see Event Handler Content Attributes from the W3C specification.

Note that the <frameset> element is obsolete in HTML5, but it was valid in HTML version 4.

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.
onresize The document view is resized.
onscroll scroll event handler. Invoked when the element's scrollbar is being scrolled.

The following event handlers are subject to the following rule:

...must be supported by Window objects, as event handler IDL attributes on the Window objects themselves, and with corresponding event handler content attributes and event handler IDL attributes exposed on all body and frameset elements that are owned by that Window object's Documents:

For more information, see Event Handler Content Attributes from the W3C specification.

Note that the <frameset> element is obsolete in HTML5, but it was valid in HTML version 4.

Attribute Description
onafterprint afterprint event handler
onbeforeprint beforeprint event handler
onbeforeunload beforeunload event handler
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.
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.
onstorage storage event handler.
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.

Legacy Support

If you're using an application built with HTML 4, your options for event handlers is much more limited.

HTML 4 only supports the following 18 event handlers:

Event Handler Event that it handles
onBlur User has left the focus of the object. For example, they clicked away from a text field that was previously selected.
onChange User has changed the object, then attempts to leave that field (i.e. clicks elsewhere).
onClick User clicked on the object.
onDblClick User clicked twice on the object.
onFocus User brought the focus to the object (i.e. clicked on it/tabbed to it)
onKeydown A key was pressed over an element.
onKeyup A key was released over an element.
onKeypress A key was pressed over an element then released.
onLoad The object has loaded.
onMousedown The cursor moved over the object and mouse/pointing device was pressed down.
onMouseup The mouse/pointing device was released after being pressed down.
onMouseover The cursor moved over the object (i.e. user hovers the mouse over the object).
onMousemove The cursor moved while hovering over an object.
onMouseout The cursor moved off the object
onReset User has reset a form.
onSelect User selected some or all of the contents of the object. For example, the user selected some text within a text field.
onSubmit User submitted a form.
onUnload User left the window (i.e. user closes the browser window).

Related