(this is an excerpt from DOM Enlightenment)
In the tables below I detail the most common pre-defined events (as opposed ot custom events) that can be attached to Element nodes, the document object, and the window object. Of course not all events are directly applicable to the node or object it can be attached too. That is, just because you can attach the event without error, and most likley invoke the event (i.e. bubbling events like onchange to window), does not mean that adding something like window.onchange is logical given that this event, by design was not meant for the window object.
The tables below were crafted from the following three resources Document Object Model (DOM) Level 3 Events Specification 5 User Event Module, DOM event reference, and HTML Living Standard 7.1.6 Event handlers on elements, Document objects, and Window objects, and Event compatibility tables.
I've only mentioned here in this section the most common event types. Keep in mind there are numerous HTML5 api's that I've excluded from the this section (e.g. media events for <video> and <audio> elements or all state change events for the XMLHttpRequest Level 2).
The copy, cut, and textinput event are not defined by DOM 3 events or HTML5
User interface events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| load | Event, UIEvent | fires when an asset (HTML page, image, CSS, frameset, <object>, or JS file) is loaded. | Element, Document, window, XMLHttpRequest, XMLHttpRequestUpload | No | No |
| unload | UIEvent | fires when user agent removes the resource (document, element, defaultView) or any depending resources (images, CSS file, etc.) | window, <body>, <frameset> | No | No |
| abort | Event, UIEvent | Fires when an resource (object/image) is stopped from loading before completely loaded | Element, XMLHttpRequest, XMLHttpRequestUpload | Yes | No |
| error | Event, UIEvent | Fires when a resource failed to load, or has been loaded but cannot be interpreted according to its semantics, such as an invalid image, a script execution error, or non-well-formed XML | Element, XMLHttpRequest, XMLHttpRequestUpload | Yes | No |
| resize | UIEvent | Fires when a document view has been resized. This event type is dispatched after all effects for that occurrence of resizing of that particular event target have been executed by the user agent | window, <body>, <frameset> | Yes | No |
| scroll | UIEvent | Fires when a user scrolls a document or an element. | Element, Document, window | Yes | No |
| contextmenu | MouseEvent | fires by right clicking an element | Element | Yes | Yes |
Focus events
| Event Type | Event Interface | Description | Events Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| blur | FocusEvent | Fires when an element loses focus either via the mouse or tabbing | Element (except <body> and <frameseet> ), Document | No | No |
| focus | FocusEvent | Fires when an element receives focus | Element (except <body> and <frameseet> ), Document | No | No |
| focusin | FocusEvent | Fires when an event target is about to receive focus but before the focus is shifted. This event occurs right before the focus event | Element | Yes | No |
| focusout | FocusEvent | Fires when an event target is about to lose focus but before the focus is shifted. This event occurs right before the blur event | Element | Yes | No |
Form events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| change | specific to HTML forms | Fires when a control loses the input focus and its value has been modified since gaining focus | Element | Yes | No |
| reset | specific to HTML forms | Fires when a form is reset | Element | Yes | No |
| submit | specific to HTML forms | Fires when a form is submitted | Element | Yes | Yes |
| select | specific to HTML forms | Fires when a user selects some text in a text field, including input and textarea | Element | Yes | No |
Mouse events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| click | MouseEvent | Fires when mouse pointer is clicked (or user presses enter key) over an element. A click is defined as a mousedown and mouseup over the same screen location. The sequence of these events is mousedown>mouseup>click. Depending upon the environment configuration, the click event may be dispatched if one or more of the event types mouseover, mousemove, and mouseout occur between the press and release of the pointing device button. The click event may also be followed by the dblclick event | Element, Document, window | Yes | Yes |
| dblclick | MouseEvent | Fires when a mouse pointer is clicked twice over an element. The definition of a double click depends on the environment configuration, except that the event target must be the same between mousedown, mouseup, and dblclick. This event type must be dispatched after the event typeclick if a click and double click occur simultaneously, and after the event type mouseup otherwise | Element, Document, window | Yes | Yes |
| mousedown | MouseEvent | Fires when mouse pointer is pressed over an element | Element, Document, window | Yes | Yes |
| mouseenter | MouseEvent | Fires when mouse pointer is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and must not be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements | Element, Document, window | No | No |
| mouseleave | MouseEvent | Fires when mouse pointer is moved off of the boundaries of an element and all of its descendent elements. This event type is similar to mouseout, but differs in that does not bubble, and that it must not be dispatched until the pointing device has left the boundaries of the element and the boundaries of all of its children | Element, Document, window | No | No |
| mousemove | MouseEvent | Fires when mouse pointer is moved while it is over an element. The frequency rate of events while the pointing device is moved is implementation-, device-, and platform-specific, but multiple consecutive mousemove events should be fired for sustained pointer-device movement, rather than a single event for each instance of mouse movement. Implementations are encouraged to determine the optimal frequency rate to balance responsiveness with performance | Element, Document, window | Yes | No |
| mouseout | MouseEvent | Fires when mouse pointer is moved off of the boundaries of an element. This event type is similar to mouseleave, but differs in that does bubble, and that it must be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements | Element, Document, window | Yes | Yes |
| mouseup | MouseEvent | Fires when mouse pointer button is released over an element | Element, Document, window | Yes | Yes |
Wheel events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| wheel (browsers use mousewheel but the specification uses wheel) | WheelEvent | Fires when a mouse wheel has been rotated around any axis, or when an equivalent input device (such as a mouse-ball, certain tablets or touchpads, etc.) has emulated such an action. Depending on the platform and input device, diagonal wheel deltas may be delivered either as a singlewheel event with multiple non-zero axes or as separate wheel events for each non-zero axis. Some helpful details about browser support can be found here. | Element, Document, Window | Yes | Yes |
Keyboard events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| keydown | KeyboardEvent | Fires when a key is initially pressed. This is sent after any key mapping is performed, but before any input method editors receive the keypress. This is sent for any key, even if it doesn't generate a character code. | Element, Document | Yes | Yes |
| keypress | KeyboardEvent | Fires when a key is initially pressed, but only if that key normally produces a character value. This is sent after any key mapping is performed, but before any input method editors receive the keypress. | Element, Document | Yes | Yes |
| keyup | KeyboardEvent | Fires when a key is released. This is sent after any key mapping is performed, and always follows thecorresponding keydown and keypress events. | Element, Document | Yes | Yes |
Touch events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| touchstart | TouchEvent | Fires event to indicate when the user places a touch point on the touch surface | Element, Document, window | Yes | Yes |
| touchend | TouchEvent | Fires event to indicate when the user removes a touch point from the touch surface, also including cases where the touch point physically leaves the touch surface, such as being dragged off of the screen | Element, Document, window | Yes | Yes |
| touchmove | TouchEvent | Fires event to indicate when the user moves a touch point along the touch surface | Element, Document, window | Yes | Yes |
| touchenter | TouchEvent | Fires event to indicate when a touch point moves onto the interactive area defined by a DOM element | Element, Document, window | No | ? |
| toucheleave | TouchEvent | Fires event to indicate when a touch point moves off the interactive area defined by a DOM element | Element, Document, window | No | ? |
| touchcancel | TouchEvent | Fires event to indicate when a touch point has been disrupted in an implementation-specific manner, such as a synchronous event or action originating from the UA canceling the touch, or the touch point leaving the document window into a non-document area which is capable of handling user interactions. | Element, Document, window | Yes | No |
Window, <body>, and frame specific events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| afterprint | ? | Fires on the object immediately after its associated document prints or previews for printing | window, <body>, <frameset> | No | No |
| beforeprint | ? | Fires on the object before its associated document prints or previews for printing | window, <body>, <frameset> | No | No |
| beforeunload | ? | Fires prior to a document being unloaded | window, <body>, <frameset> | No | Yes |
| hashchange | HashChangeEvent | Fires when there are changes to the portion of a URL that follows the number sign (#) | window, <body>, <frameset> | No | No |
| messsage | ? | Fires when the user sends a cross-document message or a message is sent from a Worker with postMessage | window, <body>, <frameset> | No | No |
| offline | NavigatorOnLine | Fires when browser is working offline | window, <body>, <frameset> | No | No |
| online | NavigatorOnLine | Fires when browser is working online | window, <body>, <frameset> | No | No |
| pagehide | PageTransitionEvent | Fires when traversing from a session history entry | window, <body>, <frameset> | No | No |
| pageshow | PageTransitionEvent | The pagehide event is fired when traversing from a session history entry | window, <body>, <frameset> | No | No |
Document specific events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| readystatechange | Event | Fires event when readyState is changed | Document, XMLHttpRequest | No | No |
| DOMContentLoaded | Event | Fires when a webpage has been parsed, but before all resources have been fully downloaded | Document | Yes | No |
Drag events
| Event Type | Event Interface | Description | Event Targets | Bubbles | Cancelable |
|---|---|---|---|---|---|
| drag | DragEvent | Fires on the source object continuously during a drag operation. | Element, Document, window | Yes | Yes |
| dragstart | DragEvent | Fires on the source object when the user starts to drag a text selection or selected object. The ondragstart event is the first to fire when the user starts to drag the mouse. | Element, Document, window | Yes | Yes |
| dragend | DragEvent | Fires on the source object when the user releases the mouse at the close of a drag operation. The ondragend event is the final drag event to fire, following the ondragleave event, which fires on the target object. | Element, Document, window | Yes | No |
| dragenter | DragEvent | Fires on the target element when the user drags the object to a valid drop target. | Element, Document, window | Yes | Yes |
| dragleave | DragEvent | Fires on the target object when the user moves the mouse out of a valid drop target during a drag operation. | Element, Document, window | Yes | No |
| dragover | DragEvent | Fires on the target element continuously while the user drags the object over a valid drop target. The ondragover event fires on the target object after the ondragenter event has fired. | Element, Document, window | Yes | Yes |
| drop | DragEvent | Fires on the target object when the mouse button is released during a drag-and-drop operation. The ondrop event fires before the ondragleave and ondragend events. | Element, Document, window | Yes | Yes |
I.E 9 ------------------------------------------------------- click is in window ................................ 1/1 dblclick is in window ............................. 1/1 mousedown is in window ............................ 1/1 mouseout is in window ............................. 1/1 mouseup is in window .............................. 1/1 mousemove is in window ............................ 1/1 wheel is in window ................................ 0/1 load is in window ................................. 1/1 abort is in window ................................ 1/1 error is in window ................................ 1/1 resize is in window ............................... 1/1 scroll is in window ............................... 1/1 contextmenu is in window .......................... 1/1 blur is in window ................................. 1/1 focus is in window ................................ 1/1 focusin is in window .............................. 1/1 focusout is in window ............................. 1/1 beforeunload is in window ......................... 1/1 hashchange is in window ........................... 1/1 pageshow is in window ............................. 0/1 pagehide is in window ............................. 0/1 beforeprint is in window .......................... 1/1 afterprint is in window ........................... 1/1 message is in window .............................. 1/1 online is in window ............................... 1/1 offline is in window .............................. 1/1 beforeunload is in window ......................... 1/1 popstate is in window ............................. 0/1 storage is in window .............................. 1/1 unload is in window ............................... 1/1 readystatechange is in document ................... 1/1 mousewheel is in document ......................... 1/1 change fires on Element ........................... 1/1 reset fires on Element ............................ 1/1 submit fires on Element ........................... 1/1 select fires on Element ........................... 1/1 keydown fires on Element .......................... 1/1 keypress fires on Element ......................... 1/1 keyup fires on Element ............................ 1/1 drag fires on Element ............................. 1/1 dragstart fires on Element ........................ 1/1 dragend fires on Element .......................... 1/1 dragenter fires on Element ........................ 1/1 dragleave fires on Element ........................ 1/1 dragover fires on Element ......................... 1/1 drop fires on Element ............................. 1/1 mouseenter fires on Element ....................... 1/1 mouseleave fires on Element ....................... 1/1 total ............................................... 44/48
Chrome 20.0 ------------------------------------------------------- click is in window ................................ 1/1 dblclick is in window ............................. 1/1 mousedown is in window ............................ 1/1 mouseout is in window ............................. 1/1 mouseup is in window .............................. 1/1 mousemove is in window ............................ 1/1 wheel is in window ................................ 0/1 load is in window ................................. 1/1 abort is in window ................................ 1/1 error is in window ................................ 1/1 resize is in window ............................... 1/1 scroll is in window ............................... 1/1 contextmenu is in window .......................... 1/1 blur is in window ................................. 1/1 focus is in window ................................ 1/1 focusin is in window .............................. 0/1 focusout is in window ............................. 0/1 beforeunload is in window ......................... 1/1 hashchange is in window ........................... 1/1 pageshow is in window ............................. 1/1 pagehide is in window ............................. 1/1 beforeprint is in window .......................... 0/1 afterprint is in window ........................... 0/1 message is in window .............................. 1/1 online is in window ............................... 1/1 offline is in window .............................. 1/1 beforeunload is in window ......................... 1/1 popstate is in window ............................. 1/1 storage is in window .............................. 1/1 unload is in window ............................... 1/1 readystatechange is in document ................... 1/1 mousewheel is in document ......................... 1/1 change fires on Element ........................... 1/1 reset fires on Element ............................ 1/1 submit fires on Element ........................... 1/1 select fires on Element ........................... 1/1 keydown fires on Element .......................... 1/1 keypress fires on Element ......................... 1/1 keyup fires on Element ............................ 1/1 drag fires on Element ............................. 1/1 dragstart fires on Element ........................ 1/1 dragend fires on Element .......................... 1/1 dragenter fires on Element ........................ 1/1 dragleave fires on Element ........................ 1/1 dragover fires on Element ......................... 1/1 drop fires on Element ............................. 1/1 mouseenter fires on Element ....................... 0/1 mouseleave fires on Element ....................... 0/1 total ............................................... 41/48
Firefox 13.0 ------------------------------------------------------- click is in window ................................ 1/1 dblclick is in window ............................. 1/1 mousedown is in window ............................ 1/1 mouseout is in window ............................. 1/1 mouseup is in window .............................. 1/1 mousemove is in window ............................ 1/1 wheel is in window ................................ 0/1 load is in window ................................. 1/1 abort is in window ................................ 1/1 error is in window ................................ 1/1 resize is in window ............................... 1/1 scroll is in window ............................... 1/1 contextmenu is in window .......................... 1/1 blur is in window ................................. 1/1 focus is in window ................................ 1/1 focusin is in window .............................. 0/1 focusout is in window ............................. 0/1 beforeunload is in window ......................... 1/1 hashchange is in window ........................... 1/1 pageshow is in window ............................. 1/1 pagehide is in window ............................. 1/1 beforeprint is in window .......................... 1/1 afterprint is in window ........................... 1/1 message is in window .............................. 1/1 online is in window ............................... 1/1 offline is in window .............................. 1/1 beforeunload is in window ......................... 1/1 popstate is in window ............................. 1/1 storage is in window .............................. 0/1 unload is in window ............................... 1/1 readystatechange is in document ................... 1/1 mousewheel is in document ......................... 0/1 change fires on Element ........................... 1/1 reset fires on Element ............................ 1/1 submit fires on Element ........................... 1/1 select fires on Element ........................... 1/1 keydown fires on Element .......................... 1/1 keypress fires on Element ......................... 1/1 keyup fires on Element ............................ 1/1 drag fires on Element ............................. 1/1 dragstart fires on Element ........................ 1/1 dragend fires on Element .......................... 1/1 dragenter fires on Element ........................ 1/1 dragleave fires on Element ........................ 1/1 dragover fires on Element ......................... 1/1 drop fires on Element ............................. 1/1 mouseenter fires on Element ....................... 1/1 mouseleave fires on Element ....................... 1/1 total ............................................... 43/48
Opera 11.6 ------------------------------------------------------- click is in window ................................ 1/1 dblclick is in window ............................. 1/1 mousedown is in window ............................ 1/1 mouseout is in window ............................. 1/1 mouseup is in window .............................. 1/1 mousemove is in window ............................ 1/1 wheel is in window ................................ 0/1 load is in window ................................. 1/1 abort is in window ................................ 1/1 error is in window ................................ 1/1 resize is in window ............................... 1/1 scroll is in window ............................... 1/1 contextmenu is in window .......................... 1/1 blur is in window ................................. 1/1 focus is in window ................................ 1/1 focusin is in window .............................. 0/1 focusout is in window ............................. 0/1 beforeunload is in window ......................... 0/1 hashchange is in window ........................... 1/1 pageshow is in window ............................. 0/1 pagehide is in window ............................. 0/1 beforeprint is in window .......................... 0/1 afterprint is in window ........................... 0/1 message is in window .............................. 1/1 online is in window ............................... 0/1 offline is in window .............................. 0/1 beforeunload is in window ......................... 0/1 popstate is in window ............................. 1/1 storage is in window .............................. 1/1 unload is in window ............................... 1/1 readystatechange is in document ................... 1/1 mousewheel is in document ......................... 1/1 change fires on Element ........................... 1/1 reset fires on Element ............................ 1/1 submit fires on Element ........................... 1/1 select fires on Element ........................... 1/1 keydown fires on Element .......................... 1/1 keypress fires on Element ......................... 1/1 keyup fires on Element ............................ 1/1 drag fires on Element ............................. 1/1 dragstart fires on Element ........................ 1/1 dragend fires on Element .......................... 1/1 dragenter fires on Element ........................ 1/1 dragleave fires on Element ........................ 1/1 dragover fires on Element ......................... 1/1 drop fires on Element ............................. 1/1 mouseenter fires on Element ....................... 1/1 mouseleave fires on Element ....................... 1/1 total ............................................... 37/48
Safar 5.1 ------------------------------------------------------- click is in window ................................ 1/1 dblclick is in window ............................. 1/1 mousedown is in window ............................ 1/1 mouseout is in window ............................. 1/1 mouseup is in window .............................. 1/1 mousemove is in window ............................ 1/1 wheel is in window ................................ 0/1 load is in window ................................. 1/1 abort is in window ................................ 1/1 error is in window ................................ 1/1 resize is in window ............................... 1/1 scroll is in window ............................... 1/1 contextmenu is in window .......................... 1/1 blur is in window ................................. 1/1 focus is in window ................................ 1/1 focusin is in window .............................. 0/1 focusout is in window ............................. 0/1 beforeunload is in window ......................... 1/1 hashchange is in window ........................... 1/1 pageshow is in window ............................. 1/1 pagehide is in window ............................. 1/1 beforeprint is in window .......................... 0/1 afterprint is in window ........................... 0/1 message is in window .............................. 1/1 online is in window ............................... 1/1 offline is in window .............................. 1/1 beforeunload is in window ......................... 1/1 popstate is in window ............................. 1/1 storage is in window .............................. 1/1 unload is in window ............................... 1/1 readystatechange is in document ................... 1/1 mousewheel is in document ......................... 1/1 change fires on Element ........................... 1/1 reset fires on Element ............................ 1/1 submit fires on Element ........................... 1/1 select fires on Element ........................... 1/1 keydown fires on Element .......................... 1/1 keypress fires on Element ......................... 1/1 keyup fires on Element ............................ 1/1 drag fires on Element ............................. 1/1 dragstart fires on Element ........................ 1/1 dragend fires on Element .......................... 1/1 dragenter fires on Element ........................ 1/1 dragleave fires on Element ........................ 1/1 dragover fires on Element ......................... 1/1 drop fires on Element ............................. 1/1 mouseenter fires on Element ....................... 0/1 mouseleave fires on Element ....................... 0/1 total ............................................... 41/48
Code used for test
var test = require('testling');
var is = function ( obj, type ) {
return typeof obj === type;
};
var isEventSupported = (function() {
var TAGNAMES = {
'select': 'input', 'change': 'input',
'submit': 'form', 'reset': 'form',
'error': 'img', 'load': 'img', 'abort': 'img'
};
function isEventSupported( eventName, element ) {
element = element || document.createElement(TAGNAMES[eventName] || 'div');
eventName = 'on' + eventName;
// When using `setAttribute`, IE skips "unload", WebKit skips "unload" and "resize", whereas `in` "catches" those
var isSupported = eventName in element;
if ( !isSupported ) {
// If it has no `setAttribute` (i.e. doesn't implement Node interface), try generic element
if ( !element.setAttribute ) {
element = document.createElement('div');
}
if ( element.setAttribute && element.removeAttribute ) {
element.setAttribute(eventName, '');
isSupported = is(element[eventName], 'function');
// If property was created, "remove it" (by setting value to `undefined`)
if ( !is(element[eventName], 'undefined') ) {
element[eventName] = undefined;
}
element.removeAttribute(eventName);
}
}
element = null;
return isSupported;
}
return isEventSupported;
})();
['click','dblclick','mousedown','mouseout','mouseup','mousemove','wheel','load','abort','error','resize','scroll','contextmenu','blur','focus','focusin','focusout','beforeunload','hashchange','pageshow','pagehide','beforeprint','afterprint','message','online','offline','beforeunload','popstate','storage','unload'].forEach(function(item){
test(item + " is in window", function (t) {
t.ok('on'+item in window, true);
t.end();
});
});
['readystatechange','mousewheel'].forEach(function(item){
test(item +' is in document', function (t) {
t.ok('on'+item in document, true);
t.end();
});
});
['change','reset','submit','select','keydown','keypress','keyup','drag','dragstart','dragend','dragenter','dragleave','dragover','drop','mouseenter','mouseleave'].forEach(function(item){
test(item+' fires on Element', function (t) {
t.ok(isEventSupported(item), true);
t.end();
});
});