DOM(Document Object Model) events allow event-driven programming language like JavaScript, JScript, ECMAScript, VBScript and Java to register various event handler/listener on the element nodes inside a DOM tree, e.g. HTML, XHTML, XUL, and SVG documents.

Events

HTML 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 XMLHttpResponse, File API, …)

Mouse:
click, dblclick, mousedown, mouseover, mousemove, mouseout, dragstart, drag, dragenter, dragleave, dragover, drop, dragend

  • Click: The sequence of click: mousedown, mouseup, click
  • Mouseover: Fires when the pointing device is moved onto an element
  • Mouseover: Fires when the pointing device is moved while it is over an element
  • Dragstart: Fired on an element when a drag is started
  • Dragend: The source of the drag will receive a dragend event when the drag operation is complete, whether it was sucessful or not,

Keyboard:
keydown, keypress, keyup

HTML frame/object:
load, unload, abort, error, resize, scroll

  • Load: Fires when the user agent finishes loading all content within a document, including window, frames, objects, and images.
  • Unlaod: Fires when the user agent removes all content from a window or frame.
  • Abort: Fires when an object/image is stopped from loading before completely loaded.
  • Error: Fires when an object/image/frame/ cannot be loaded properly.
  • Resize: Fires when a document view is resized.
  • Scroll: Fires when an element or document view is scrolled

HTML form:
select, change, submit, reset, focus, blur

  • Select: Fires when a user selects some text in a text field, including input and textarea.
  • Change: Fires when a control loses the input focus and its value has been modified since gaining focus.
  • Submit: Fires when a form is submitted.
  • Reset: Fires when a form is reset.
  • Focus: Fires when an element receives focus either via the pointing device or by tab navigation.
  • Blur: Fires when an element loses focus.

User Interface:
focusin, focusout, DOMActivate

Mutation:
DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsertedIntoDocument, DOMAttrModified, DOMCharacterDataModified

Progress:
loadstart, progress, error, abort, load, loadnd

Touch Events

Web broswer running on touch-enabled devices will generate additional events

Touch:
touchstart, touchend, touchmove, touchenter, touchleave, touchcancel

  • Touchstart: Fires when a finger is placed on the touch surface/screen.
  • Touchend: Fires when a finger is removed from the touch surface/screen.
  • Touchenter: Fires when a touch point moves onto 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.

In the W3C draft recommendation, a TouchEvent delivers a TouchList of Touch location, the modifier keys that were active, a TouchList of Touch locations within the targeted DOM element, and a TouchList of Touch lcoations that have changed since the previous TouchEvent.

Internet Explorer-specific events

In addition to the common/W3C events, two major types of events are added by Internet Explorer. Some of the events have been implemented as de facto standards by other browsers.

Clipbord:
cut, copy, paste, beforecut, beforecopy, beforepaste

Data binding:
afterupdate, beforeupdate, cellchange, dataavailable, datasetchagned, datasetcomplete, errorudpate, rowenter, rowexit, rowsdelete, rowinserted

  • Afterupdate: Fires immediately after a databound object has been updated.
  • Beforeupdate: Fires before a data source has changed.
  • Cellchange: Fires when a data source has change.
  • Dataavailable: Fires when new data from a data source become available.
  • Rowenter: Fires whena new row of data from the data source is available.

Mouse:
contextmenu, selectstart

  • Contentmenu: Fires when the context menu is shown.
  • Selectstart: Fires when the user starts to select text.

Keyboard:
help

  • Help: Fires when the user initiates help.

HTML frame/object:
beforeunload, stop

  • Beforeunload: Fires before a document is unloaded.
  • Stop: Fires when the user stop loading the object. (unlike abort, stop event can be attached to document).