DOM (Document Object Model) Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. Client-side scripting languages like JavaScript, JScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.
Examples of DOM Events:
When a user clicks the mouse When a web page has loaded When an image has been loaded When the mouse moves over an element When an input field is changed When an HTML form is submitted When a user presses a key
Historically, like DOM, the event models used by various web browsers had some significant differences which caused compatibility problems. To combat this, the event model was standardized by the World Wide Web Consortium (W3C) in DOM Level 2.
Events
HTML events
Common events There is a huge collection of events that can be generated by most element nodes: Mouse events. Keyboard events. HTML frame/object events. HTML form events. User interface events. Mutation events (notification of any changes to the structure of a document). Progress events (used by XMLHttpRequest and File API).
Note that the event classification above is not exactly the same as W3C's classification.
Category Type Attribute Description Bubbles Cancelable Mouse click onclick Fires when the pointing device button is clicked 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 dblclick ondblclick Fires when the pointing device button is double-clicked over an element mousedown onmousedown Fires when the pointing device button is pressed over an element mouseup onmouseup Fires when the pointing device button is released over an element mouseover onmouseover Fires when the pointing device is moved onto an element mousemove onmousemove Fires when the pointing device is moved while it is over an element mouseout onmouseout Fires when the pointing device is moved away from an element dragstart ondragstart Fired on an element when a drag is started. drag ondrag This event is fired at the source of the drag, that is, the element where dragstart was fired, during the drag operation. dragenter ondragenter Fired when the mouse is first moved over an element while a drag is occurring. dragleave ondragleave This event is fired when the mouse leaves an element while a drag is occurring. dragover ondragover This event is fired as the mouse is moved over an element when a drag is occurring. drop ondrop The drop event is fired on the element where the drop occurs at the end of the drag operation. dragend ondragend The source of the drag will receive a dragend event when the drag operation is complete, whether it was successful or not. Keyboard keydown onkeydown Fires before keypress, when a key on the keyboard is pressed. keypress onkeypress Fires after keydown, when a key on the keyboard is pressed. keyup onkeyup Fires when a key on the keyboard is released HTML frame/object load onload Fires when the user agent finishes loading all content within a document, including window, frames, objects and images For elements, it fires when the target element and all of its content has finished loading unload onunload Fires when the user agent removes all content from a window or frame For elements, it fires when the target element or any of its content has been removed abort onabort Fires when an object/image is stopped from loading before completely loaded error onerror Fires when an object/image/frame cannot be loaded properly resize onresize Fires when a document view is resized scroll onscroll Fires when an element or document view is scrolled , except that a scroll event on document must bubble to the window HTML form select onselect Fires when a user selects some text in a text field, including input and textarea change onchange Fires when a control loses the input focus and its value has been modified since gaining focus submit onsubmit Fires when a form is submitted reset onreset Fires when a form is reset focus onfocus Fires when an element receives focus either via the pointing device or by tab navigation blur onblur Fires when an element loses focus either via the pointing device or by tabbing navigation User interface focusin Similar to HTML focus event, but can be applied to any focusable element focusout Similar to HTML blur event, but can be applied to any focusable element DOMActivate Similar to XUL command event. Fires when an element is activated, for instance, through a mouse click or a keypress. Mutation DOMSubtreeModified Fires when the subtree is modified DOMNodeInserted Fires when a node has been added as a child of another node DOMNodeRemoved Fires when a node has been removed from a DOM-tree DOMNodeRemovedFromDocument Fires when a node is being removed from a document DOMNodeInsertedIntoDocument Fires when a node is being inserted into a document DOMAttrModified Fires when an attribute has been modified DOMCharacterDataModified Fires when the character data has been modified Progress loadstart Progress has begun. progress In progress. After loadstart has been dispatched. error Progression failed. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched. abort Progression is terminated. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched. load Progression is successful. After the last progress has been dispatched, or after loadstart has been dispatched if progress has not been dispatched. loadend Progress has stopped. After one of error, abort, or load has been dispatched.
Note that the events whose names start with "DOM" are currently not well supported, and for this and other performance reasons are deprecated by the W3C in DOM Level 3. Mozilla and Opera support DOMAttrModified, DOMNodeInserted, DOMNodeRemoved and DOMCharacterDataModified. Chrome and Safari support these events, except for DOMAttrModified.
Touch events Web browsers running on touch-enabled devices, such as Apple's iOS and Google's Android, generate additional events. Category Type Attribute Description Bubbles Cancelable Touch touchstart Fires when a finger is placed on the touch surface/screen. touchend Fires when a finger is removed from the touch surface/screen. touchmove Fires when a finger already placed on the screen is moved across the screen. touchenter Fires when a touch point moves onto the interactive area defined by a DOM element. touchleave Fires when a touch point moves off the interactive area defined by a DOM element. touchcancel A user agent must dispatch this event type to indicate when a TouchPoint has been disrupted in an implementation-specific manner, such as by moving outside the bounds of the UA window. A user agent may also dispatch this event type when the user places more touch points (The coordinate point at which a pointer (e.g. finger or stylus) intersects the target surface of an interface) on the touch surface than the device or implementation is configured to store, in which case the earliest TouchPoint object in the TouchList should be removed.
In the W3C draft recommendation, a TouchEvent delivers a TouchList of Touch locations, the modifier keys that were active, a TouchList of Touch locations within the targeted DOM element, and a TouchList of Touch locations that have changed since the previous TouchEvent.
Apple didn't join this working group, and delayed W3C recommendation of its Touch Events Specification by disclosing patents late in the recommendation process.
Pointer events Web browsers on devices with various types of input devices including mouse, touch panel, and pen may generate integrated input events. Users can see what type of input device is pressed, what button is pressed on that device, and how strongly the button is pressed when it comes to a stylus pen. As of October 2013, this event is only supported by Internet Explorer 10 and 11. Category Type Attribute Description Bubbles Cancelable Pointer pointerdown onpointerdown Fires when the pointing device button is activated, or pressed over an element. pointerup onpointerup Fires when the pointing device button is released over an element pointercancel onpointercancel Fires when a pointing device is unlikely to continue to produce event because, for example, the device is used for panning/zooming after a pointerdown event. pointermove onpointermove Fires when the pointing device is moved while it is over an element pointerover onpointerover Fires when the pointing device is moved onto an element pointerout onpointerout Fires when the pointing device is moved away from an element. Also fires after pointerup by pointing device without hovering, or after pointerenter onpointerenter Fires when the pointing device is moved onto an element, or when the button of the pointing device which does not support hovering is pressed on one of its descendant elements. pointerleave onpointerleave Fires when the pointing device is moved away from an element, or when the button of the pointing device which does not support hovering is released over its descendant elements. gotpointercapture ongotpointercapture Fires when the pointer is captured by setPointerCapture method. lostpointercapture onlostpointercapture Fires when the pointer is released by releasePointerCapture method.
Indie UI events Not yet really implemented, the Indie UI working groups want to help web application developers to be able to support standard user interaction events without having to handle different platform specific technical events that could match with it.
Scripting usable interfaces can be difficult, especially when one considers that user interface design patterns differ across software platforms, hardware, and locales, and that those interactions can be further customized based on personal preference. Individuals are accustomed to the way the interface works on their own system, and their preferred interface frequently differs from that of the web application author's preferred interface.
For example, web application authors, wishing to intercept a user's intent to undo the last action, need to "listen" for all the following events: Control+Z on Windows and Linux. Command+Z on Mac OS X. Shake events on some mobile devices.
It would be simpler to listen for a single, normalized request to "undo" the previous action.