DOM event reference

  • Revision slug: DOM/DOM_event_reference
  • Revision title: DOM event reference
  • Revision id: 6237
  • Created:
  • Creator: dbruant
  • Is current revision? No
  • Comment one or more formatting changes

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 Description
{{ domevent("DOMActivate") }}   Specification: W3C Draft
{{ domevent("DOMAttrModified") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMAttributeNameChanged") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMCharacterDataModified") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMContentLoaded") }} ? Specification: HTML5
{{ domevent("DOMElementNameChanged") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMFocusIn") }}   Specification: W3C Draft
{{ domevent("DOMFocusOut") }}   Specification: W3C Draft
{{ domevent("DOMNodeInserted") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMNodeInsertedIntoDocument") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMNodeRemoved") }} {{ domxref("MutationEvent") }} Specification: W3C Draft
{{ domevent("DOMNodeRemovedFromDocument") }} {{ domxref("MutationEvent") }} Specification: W3C Draft {{ deprecated_inline() }}
{{ domevent("DOMSubtreeModified") }} {{ domxref("MutationEvent") }} A general event for notifications of any changes to the document. Specification: (W3C Draft) {{ deprecated_inline() }}
{{ domevent("afterprint") }}   Sent after printing a document has finished. See Detecting print requests for an example. {{ gecko_minversion_inline("6.0") }} {{ non-standard_inline() }}
{{ domevent("beforeprint") }}   Sent before printing of a document begins. See Detecting print requests for an example. {{ gecko_minversion_inline("6.0") }} {{ non-standard_inline() }}
{{ domevent("keydown") }} {{ domxref("KeyboardEvent") }} Sent 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") }}

Sent 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") }} Sent 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("offline") }}   Can used on window, document, or document.body, see Online_and_offline_events. Specification: WHATWG HTML 5 DRAFT {{ gecko_minversion_inline("1.9") }}
{{ domevent("online") }}   Can used on window, document, or document.body, see Online_and_offline_events. Specification: WHATWG HTML 5 DRAFT {{ gecko_minversion_inline("1.9") }}
{{ domevent("textinput") }} {{ domxref("TextInput") }} 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. Specification: W3C Draft {{ unimplemented_inline() }}

Specifications

DOM Level 3 Events (W3C Working Draft)

See also

{{ languages( { "ja": "ja/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">Description</td> </tr> <tr> <td>{{ domevent("DOMActivate") }}</td> <td> </td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMActivate">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMAttrModified") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttrModified">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMAttributeNameChanged") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMAttributeNameChanged">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMCharacterDataModified") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMCharacterDataModified">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMContentLoaded") }}</td> <td>?</td> <td>Specification: <a class=" external" href="http://www.whatwg.org/specs/web-apps/current-work/multipage/the-end.html#the-end">HTML5</a></td> </tr> <tr> <td>{{ domevent("DOMElementNameChanged") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMElementNameChanged">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMFocusIn") }}</td> <td> </td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusIn">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMFocusOut") }}</td> <td> </td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMFocusOut">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMNodeInserted") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInserted">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMNodeInsertedIntoDocument") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeInsertedIntoDocument">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMNodeRemoved") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemoved">W3C Draft</a></td> </tr> <tr> <td>{{ domevent("DOMNodeRemovedFromDocument") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMNodeRemovedFromDocument">W3C Draft</a> {{ deprecated_inline() }}</td> </tr> <tr> <td>{{ domevent("DOMSubtreeModified") }}</td> <td>{{ domxref("MutationEvent") }}</td> <td>A general event for notifications of any changes to the document. Specification: (<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified">W3C Draft</a>) {{ deprecated_inline() }}</td> </tr> <tr> <td>{{ domevent("afterprint") }}</td> <td> </td> <td>Sent 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") }} {{ non-standard_inline() }}</td> </tr> <tr> <td>{{ domevent("beforeprint") }}</td> <td> </td> <td>Sent 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") }} {{ non-standard_inline() }}</td> </tr> <tr> <td>{{ domevent("keydown") }}</td> <td>{{ domxref("KeyboardEvent") }}</td> <td>Sent 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> <p>Sent 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>Sent 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("offline") }}</td> <td> </td> <td>Can 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>. Specification: <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG HTML 5 DRAFT</a> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td>{{ domevent("online") }}</td> <td> </td> <td>Can 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>. Specification: <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG HTML 5 DRAFT</a> {{ gecko_minversion_inline("1.9") }}</td> </tr> <tr> <td>{{ domevent("textinput") }}</td> <td>{{ domxref("TextInput") }}</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. Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/#event-type-textInput">W3C Draft</a> {{ unimplemented_inline() }}</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">Event Handlers</a></li> <li><a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko-Specific DOM Events</a></li>
</ul>
<p>{{ languages( { "ja": "ja/DOM/DOM_event_reference" } ) }}</p>
Revert to this revision