DOM event reference

  • Revision slug: DOM/DOM_event_reference
  • Revision title: DOM event reference
  • Revision id: 6279
  • Created:
  • Creator: Nickolay
  • Is current revision? No
  • Comment fix touch event links to use prettier anchors, change the link name from W3C Draft (especially since the spec is a CR anyway); 12 words added, 8 words removed

Revision Content

{{ draft() }}

Following events can be captured by adding event handlers by calling a DOM element's {{ domxref("element.addEventListener()") }} method.

Note: This page needs content, and the child pages need filling out.

DOM events

Event name Event type Targets Specification Description
{{ domevent("DOMActivate") }}     DOM L3 Events  
{{ domevent("DOMAttrModified") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domevent("DOMAttributeNameChanged") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domevent("DOMCharacterDataModified") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domeventxref("DOMContentLoaded") }} {{ domxref("Event") }}   HTML5  
{{ domevent("DOMElementNameChanged") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domevent("DOMFocusIn") }}     DOM L3 Events  
{{ domevent("DOMFocusOut") }}     DOM L3 Events  
{{ domevent("DOMNodeInserted") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domevent("DOMNodeInsertedIntoDocument") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domevent("DOMNodeRemoved") }} {{ domxref("MutationEvent") }}   DOM L3 Events  
{{ domevent("DOMNodeRemovedFromDocument") }} {{ domxref("MutationEvent") }}   DOM L3 Events {{ deprecated_inline() }}
{{ domevent("DOMSubtreeModified") }} {{ domxref("MutationEvent") }}   DOM L3 Events {{ deprecated_inline() }} A general event for notifications of any changes to the document.
{{ domevent("abort") }}   {{ domxref("Element") }}, {{ domxref("HTMLMediaElement") }} DOM L3 Events, HTML5 Fired when the user abort the download of a resource.
{{ domevent("afterprint") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}   Fired after printing a document has finished. See Detecting print requests for an example. {{ gecko_minversion_inline("6.0") }}
{{ domevent("beforeprint") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}   Fired before printing of a document begins. See Detecting print requests for an example. {{ gecko_minversion_inline("6.0") }}
{{ domeventxref("beforeunload") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}   IE-specific. Fired before a resource is unloaded (while unload is fired afterward)
{{ domevent("blur") }} {{ domxref("FocusEvent") }} {{ domxref("Element") }} (except <body> and <frameseet>), {{ domxref("Document") }}   Fired when an element target loses focus.
{{ domevent("canplay") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("canplaythrough") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("click") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domeventxref("compositionend") }} {{ domxref("CompositionEvent") }} {{ domxref("Element") }} DOM L3 Events {{ gecko_minversion_inline("9.0") }}
{{ domeventxref("compositionstart") }} {{ domxref("CompositionEvent") }} {{ domxref("Element") }} DOM L3 Events {{ gecko_minversion_inline("9.0") }}
{{ domeventxref("compositionupdate") }} {{ domxref("CompositionEvent") }} {{ domxref("Element") }} DOM L3 Events {{ gecko_minversion_inline("9.0") }}
{{ domevent("contextmenu") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("cuechange") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("dblclick") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domevent("drag") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("dragend") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("dragenter") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("dragleave") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("dragover") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("dragstart") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("drop") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("durationchange") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("emptied") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("ended") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domeventxref("error") }} {{ domxref("UIEvent") }} {{ domxref("Element") }} (except <body> and <frameseet>), {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events Fired when a resource fails to load (network error, script execution error, etc).
{{ domevent("focus") }} {{ domxref("FocusEvent") }} {{ domxref("Element") }} (except <body> and <frameseet>), {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events Fired when an element receives focus.
{{ domevent("focusin") }} {{ domxref("FocusEvent") }}   DOM L3 Events Fired when an event target is about to receive focus but before the focus is shifted. This event occurs right before the focus event.
{{ domevent("focusout") }} {{ domxref("FocusEvent") }}   DOM L3 Events Fired when an event target is about to lose focus but before the focus is shifted. This event occurs right before the blur event.
{{ domevent("hashchange") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}    
{{ domeventxref("input") }} {{ domxref("Event") }} {{ domxref("Element") }} HTML5  
{{ domevent("invalid") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("keydown") }} {{ domxref("KeyboardEvent") }}   DOM L3 Events Fired 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.
{{ domevent("keypress") }} {{ domxref("KeyboardEvent") }}   DOM L3 Events

Fired 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.

Note: This is sent in addition to, not instead of, the {{ domevent("keydown") }} event.

This event has been deprecated in favor of {{ domevent("textinput") }}.

{{ domevent("keyup") }} {{ domxref("KeyboardEvent") }}   DOM L3 Events Fired when a key is released. This is sent after any key mapping is performed, and always follows the corresponding {{ domevent("keydown") }} and {{ domevent("keypress") }} events.
{{ domevent("load") }} {{ domxref("UIEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events Fired when the resource (document, element, defaultView) and depending resources (images, script downloading and execution, css loading, etc.) are loaded.
{{ domevent("loadeddata") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("loadedmetadata") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("loadstart") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("message") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}    
{{ domevent("mousedown") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domeventxref("mouseenter") }} {{ domxref("MouseEvent") }}   DOM L3 Events Fired when entering an element or any of its descendants.
{{ domeventxref("mouseleave") }} {{ domxref("MouseEvent") }}   DOM L3 Events Fired when leaving an element and all of its descendants.
{{ domevent("mousemove") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domevent("mouseout") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domevent("mouseover") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domevent("mouseup") }} {{ domxref("MouseEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events  
{{ domevent("mousewheel") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("mozfullscreenchange") }}       Sent to an element when it's granted full-screen mode, or to a document when it leaves full-screen mode.
{{ domevent("offline") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }} HTML5 Can be used on window, document, or document.body, see Online_and_offline_events. {{ gecko_minversion_inline("1.9") }}
{{ domevent("online") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }} HTML5 Can be used on window, document, or document.body, see Online_and_offline_events. {{ gecko_minversion_inline("1.9") }}
{{ domevent("pagehide") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}    
{{ domevent("pageshow") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}    
{{ domevent("pause") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("play") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("playing") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("popstate") }}   {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}    
{{ domevent("progress") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("ratechange") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("readystatechange") }}   {{ domxref("Document") }}    
{{ domevent("reset") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("resize") }} {{ domxref("UIEvent") }} {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }} DOM L3 Events Fired when the browser window is resized. May apply to <iframe>s.
{{ domevent("scroll") }} {{ domxref("UIEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events Fired when a user scrolls a document or an element.
{{ domevent("seeked") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("seeking") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("select") }} {{ domxref("UIEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} DOM L3 Events Fired when a user selects some text.
{{ domevent("show") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("stalled") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("storage") }} {{ domxref("StorageEvent") }} {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}    
{{ domevent("submit") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("suspend") }}   {{ domxref("HTMLMediaElement") }} HTML5  
{{ domevent("textinput") }} {{ domxref("TextInput") }} {{ domxref("Element") }} DOM L3 Events Similar to keypress, except it works with all text input methods and not just keyboards. Pasting text into an input box may also fire this event. {{ unimplemented_inline() }}
{{ domevent("timeupdate") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("touchstart") }} {{ domxref("TouchEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} Touch events v1  
{{ domevent("touchmove") }} {{ domxref("TouchEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} Touch events v1  
{{ domevent("touchend") }} {{ domxref("TouchEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} Touch events v1  
{{ domevent("touchcancel") }} {{ domxref("TouchEvent") }} {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }} Touch events v1  
{{ domevent("unload") }} {{ domxref("UIEvent") }} {{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }} DOM L3 Events Fired when the resource (document, element, defaultView) or any depending resources (images, CSS file, etc.) is removed from the environment.
{{ domevent("volumechange") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    
{{ domevent("waiting") }}   {{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}    

Specifications

DOM Level 3 Events (W3C Working Draft)

See also

{{ languages( { "ja": "ja/DOM/DOM_event_reference","zh-cn": "zh-cn/DOM/DOM_event_reference"  } ) }}

Revision Source

<p>{{ draft() }}</p>
<p>Following events can be captured by adding event handlers by calling a DOM element's {{ domxref("element.addEventListener()") }} method.</p>
<div class="note"><strong>Note:</strong> This page needs content, and the child pages need filling out.</div>
<h2>DOM events</h2>
<table class="standard-table" style="width: auto;"> <tbody> <tr> <td class="header">Event name</td> <td class="header">Event type</td> <td class="header">Targets</td> <td class="header">Specification</td> <td class="header">Description</td> </tr> <tr> <td>{{ domevent("DOMActivate") }}</td> <td> </td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMAttrModified") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMAttributeNameChanged") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttributeNameChanged">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMCharacterDataModified") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domeventxref("DOMContentLoaded") }}</td> <td>{{ domxref("Event") }}</td> <td> </td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMElementNameChanged") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMElementNameChanged">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMFocusIn") }}</td> <td> </td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMFocusOut") }}</td> <td> </td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMNodeInserted") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMNodeInsertedIntoDocument") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMNodeRemoved") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("DOMNodeRemovedFromDocument") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">DOM L3 Events</a></td> <td>{{ deprecated_inline() }}</td> </tr> <tr> <td>{{ domevent("DOMSubtreeModified") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">DOM L3 Events</a></td> <td>{{ deprecated_inline() }} A general event for notifications of any changes to the document.</td> </tr> <tr> <td>{{ domevent("abort") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-abort">DOM L3 Events</a>, <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-abort">HTML5</a></td> <td>Fired when the user abort the download of a resource.</td> </tr> <tr> <td>{{ domevent("afterprint") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td>Fired after printing a document has finished. See <a href="/en/Printing#Detecting_print_requests" title="https://developer.mozilla.org/en/Printing#Detecting_print_requests">Detecting print requests</a> for an example. {{ gecko_minversion_inline("6.0") }}</td> </tr> <tr> <td>{{ domevent("beforeprint") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td>Fired before printing of a document begins. See <a href="/en/Printing#Detecting_print_requests" title="https://developer.mozilla.org/en/Printing#Detecting_print_requests">Detecting print requests</a> for an example. {{ gecko_minversion_inline("6.0") }}</td> </tr> <tr> <td>{{ domeventxref("beforeunload") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td>IE-specific. Fired before a resource is unloaded (while unload is fired afterward)</td> </tr> <tr> <td>{{ domevent("blur") }}</td> <td>{{ domxref("FocusEvent") }}</td> <td>{{ domxref("Element") }} (except <code>&lt;body&gt;</code> and <code>&lt;frameseet&gt;</code>), {{ domxref("Document") }}</td> <td> </td> <td>Fired when an element target loses focus.</td> </tr> <tr> <td>{{ domevent("canplay") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplay">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("canplaythrough") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-canplaythrough">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("click") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-click">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domeventxref("compositionend") }}</td> <td>{{ domxref("CompositionEvent") }}</td> <td>{{ domxref("Element") }}</td> <td><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionend">DOM L3 Events</a></td> <td>{{ gecko_minversion_inline("9.0") }}</td> </tr> <tr> <td>{{ domeventxref("compositionstart") }}</td> <td>{{ domxref("CompositionEvent") }}</td> <td>{{ domxref("Element") }}</td> <td><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionstart">DOM L3 Events</a></td> <td>{{ gecko_minversion_inline("9.0") }}</td> </tr> <tr> <td>{{ domeventxref("compositionupdate") }}</td> <td>{{ domxref("CompositionEvent") }}</td> <td>{{ domxref("Element") }}</td> <td><a class="external" href="http://dev.w3.org/2006/webapi/DOM-Level-3-Events/html/DOM3-Events.html#event-type-compositionupdate">DOM L3 Events</a></td> <td>{{ gecko_minversion_inline("9.0") }}</td> </tr> <tr> <td>{{ domevent("contextmenu") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("cuechange") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("dblclick") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-dblclick">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("drag") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("dragend") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("dragenter") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("dragleave") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("dragover") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("dragstart") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("drop") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("durationchange") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("emptied") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("ended") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domeventxref("error") }}</td> <td>{{ domxref("UIEvent") }}</td> <td>{{ domxref("Element") }} (except <code>&lt;body&gt;</code> and <code>&lt;frameseet&gt;</code>), {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-error">DOM L3 Events</a></td> <td>Fired when a resource fails to load (network error, script execution error, etc).</td> </tr> <tr> <td>{{ domevent("focus") }}</td> <td>{{ domxref("FocusEvent") }}</td> <td>{{ domxref("Element") }} (except <code>&lt;body&gt;</code> and <code>&lt;frameseet&gt;</code>), {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focus">DOM L3 Events</a></td> <td>Fired when an element receives focus.</td> </tr> <tr> <td>{{ domevent("focusin") }}</td> <td>{{ domxref("FocusEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusin">DOM L3 Events</a></td> <td>Fired when an event target is about to receive focus but before the focus is shifted. This event occurs right before the focus event.</td> </tr> <tr> <td>{{ domevent("focusout") }}</td> <td>{{ domxref("FocusEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-focusout">DOM L3 Events</a></td> <td>Fired when an event target is about to lose focus but before the focus is shifted. This event occurs right before the blur event.</td> </tr> <tr> <td>{{ domevent("hashchange") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domeventxref("input") }}</td> <td>{{ domxref("Event") }}</td> <td>{{ domxref("Element") }}</td> <td><a class="external" href="http://dev.w3.org/html5/spec/common-input-element-apis.html#common-event-behaviors" title="http://dev.w3.org/html5/spec/common-input-element-apis.html#common-event-behaviors">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("invalid") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("keydown") }}</td> <td>{{ domxref("KeyboardEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keydown">DOM L3 Events</a></td> <td>Fired 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.</td> </tr> <tr> <td>{{ domevent("keypress") }}</td> <td>{{ domxref("KeyboardEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress">DOM L3 Events</a></td> <td> <p>Fired 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.</p> <div class="note"><strong>Note:</strong> This is sent in addition to, not instead of, the {{ domevent("keydown") }} event.</div> <p>This event has been deprecated in favor of {{ domevent("textinput") }}.</p> </td> </tr> <tr> <td>{{ domevent("keyup") }}</td> <td>{{ domxref("KeyboardEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keyup">DOM L3 Events</a></td> <td>Fired when a key is released. This is sent after any key mapping is performed, and always follows the corresponding {{ domevent("keydown") }} and {{ domevent("keypress") }} events.</td> </tr> <tr> <td>{{ domevent("load") }}</td> <td>{{ domxref("UIEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-load">DOM L3 Events</a></td> <td>Fired when the resource (document, element, defaultView) and depending resources (images, script downloading and execution, css loading, etc.) are loaded.</td> </tr> <tr> <td>{{ domevent("loadeddata") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadeddata">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("loadedmetadata") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadedmetadata">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("loadstart") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-loadstart">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("message") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("mousedown") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousedown">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domeventxref("mouseenter") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseenter">DOM L3 Events</a></td> <td>Fired when entering an element or any of its descendants.</td> </tr> <tr> <td>{{ domeventxref("mouseleave") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td> </td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseleave">DOM L3 Events</a></td> <td>Fired when leaving an element and all of its descendants.</td> </tr> <tr> <td>{{ domevent("mousemove") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mousemove">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("mouseout") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseout">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("mouseover") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseover">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("mouseup") }}</td> <td>{{ domxref("MouseEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup">DOM L3 Events</a></td> <td> </td> </tr> <tr> <td>{{ domevent("mousewheel") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("mozfullscreenchange") }}</td> <td> </td> <td> </td> <td> </td> <td>Sent to an element when it's granted full-screen mode, or to a document when it leaves full-screen mode.</td> </tr> <tr> <td>{{ domevent("offline") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-offline">HTML5</a></td> <td>Can be used on window, document, or document.body, see <a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online_and_offline_events</a>. {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td>{{ domevent("online") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online">HTML5</a></td> <td>Can be used on window, document, or document.body, see <a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online_and_offline_events</a>. {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td>{{ domevent("pagehide") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("pageshow") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("pause") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-pause">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("play") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-play">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("playing") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-playing">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("popstate") }}</td> <td> </td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("progress") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-progress">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("ratechange") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-ratechange">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("readystatechange") }}</td> <td> </td> <td>{{ domxref("Document") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("reset") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("resize") }}</td> <td>{{ domxref("UIEvent") }}</td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-resize">DOM L3 Events</a></td> <td>Fired when the browser window is resized. May apply to &lt;iframe&gt;s.</td> </tr> <tr> <td>{{ domevent("scroll") }}</td> <td>{{ domxref("UIEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-scroll">DOM L3 Events</a></td> <td>Fired when a user scrolls a document or an element.</td> </tr> <tr> <td>{{ domevent("seeked") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeked">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("seeking") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-seeking">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("select") }}</td> <td>{{ domxref("UIEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-select">DOM L3 Events</a></td> <td>Fired when a user selects some text.</td> </tr> <tr> <td>{{ domevent("show") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("stalled") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("storage") }}</td> <td>{{ domxref("StorageEvent") }}</td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("submit") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("suspend") }}</td> <td> </td> <td>{{ domxref("HTMLMediaElement") }}</td> <td><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-video-element.html#event-media-suspend">HTML5</a></td> <td> </td> </tr> <tr> <td>{{ domevent("textinput") }}</td> <td>{{ domxref("TextInput") }}</td> <td>{{ domxref("Element") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-textInput">DOM L3 Events</a></td> <td>Similar to <code>keypress</code>, except it works with all text input methods and not just keyboards. Pasting text into an input box may also fire this event. {{ unimplemented_inline() }}</td> </tr> <tr> <td>{{ domevent("timeupdate") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("touchstart") }}</td> <td>{{ domxref("TouchEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/touch-events/#dfn-touchstart">Touch events v1</a></td> <td> </td> </tr> <tr> <td>{{ domevent("touchmove") }}</td> <td>{{ domxref("TouchEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/touch-events/#dfn-touchmove">Touch events v1</a></td> <td> </td> </tr> <tr> <td>{{ domevent("touchend") }}</td> <td>{{ domxref("TouchEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/touch-events/#dfn-touchend">Touch events v1</a></td> <td> </td> </tr> <tr> <td>{{ domevent("touchcancel") }}</td> <td>{{ domxref("TouchEvent") }}</td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td><a class="external" href="http://www.w3.org/TR/touch-events/#dfn-touchcancel">Touch events v1</a></td> <td> </td> </tr> <tr> <td>{{ domevent("unload") }}</td> <td>{{ domxref("UIEvent") }}</td> <td>{{ domxref("Window") }}, {{ HTMLElement("body") }}, {{ HTMLElement("frameset") }}</td> <td><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-unload">DOM L3 Events</a></td> <td>Fired when the resource (document, element, defaultView) or any depending resources (images, CSS file, etc.) is removed from the environment.</td> </tr> <tr> <td>{{ domevent("volumechange") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> <tr> <td>{{ domevent("waiting") }}</td> <td> </td> <td>{{ domxref("Element") }}, {{ domxref("Document") }}, {{ domxref("Window") }}</td> <td> </td> <td> </td> </tr> </tbody>
</table>
<h2>Specifications</h2>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/">DOM Level 3 Events</a> (W3C Working Draft)</p>
<h2>See also</h2>
<ul> <li><a href="/en/DOM/element#Event_Handlers" title="en/DOM/element#Event_Handlers">DOM Reference: Event Handlers</a> (on*)</li> <li><a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko-Specific DOM Events</a></li> <li><a href="/en/XUL/Events" title="en/XUL/Events">XUL Events</a></li>
</ul>
<p>{{ languages( { "ja": "ja/DOM/DOM_event_reference","zh-cn": "zh-cn/DOM/DOM_event_reference"  } ) }}</p>
Revert to this revision