DOM event reference

  • Revision slug: DOM/DOM_event_reference
  • Revision title: DOM event reference
  • Revision id: 6212
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment 10 words added, 6 words removed

Revision Content

Following events can be captured by adding eventhandlers using addEventListener method of a DOM Element.

Specifications

DOM Level 3 Events (W3C Working Draft)

DOMSubtreeModified

This is a general event for notification of all changes to the document.

Specification: (W3C Draft)

DOMNodeInserted

Specification: W3C Draft

DOMNodeRemoved

Specification: W3C Draft

DOMNodeRemovedFromDocument

Specification: W3C Draft

DOMNodeInsertedIntoDocument

Specification: W3C Draft

DOMAttrModified

Specification: W3C Draft

DOMCharacterDataModified

Specification: W3C Draft

DOMElementNameChanged

Specification: W3C Draft

DOMAttributeNameChanged

Specification: W3C Draft

DOMActivate

Specification: W3C Draft

DOMFocusIn

Specification: W3C Draft

DOMFocusOut

Specification: W3C Draft

online

{{ Fx_minversion_inline("3") }} Can used on window, document, or document.body, see Online_and_offline_events.

Specification: WHATWG HTML 5 DRAFT

offline

{{ Fx_minversion_inline("3") }} Can used on window, document, or document.body, see Online_and_offline_events.

Specification: WHATWG HTML 5 DRAFT

textInput

This is the same as onkeypress.

Note: textInput is not implemented in Gecko.

Specification: W3C Draft

Example

Following code will display the time of last DOM Change on the title bar of the page.

Be very careful with this event it is easy to cause an infinite loop if you decide to change the DOM inside the event handler.

{{ syntax.JavaScript{code: "document.body.addEventListener(\"DOMSubtreeModified\", function(){document.title=\"DOM Changed at \" + new Date()}, false);"} }}

See also

Event Handlers, Gecko-Specific DOM Events

{{ languages( { "ja": "ja/DOM_Events" } ) }}

Revision Source

<p>Following events can be captured by adding eventhandlers using <a href="/en/DOM/element.addEventListener" title="en/DOM/element.addEventListener">addEventListener</a> method of a DOM Element.</p>
<h3 name="Specifications">Specifications</h3>
<p><a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#Events-EventTypes-complete">DOM Level 3 Events</a> (W3C Working Draft)</p>
<h3 name="DOMSubtreeModified">DOMSubtreeModified</h3>
<p>This is a general event for notification of all changes to the document.</p>
<p>Specification: (<a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMSubtreeModified">W3C Draft</a>)</p>
<h3 name="DOMNodeInserted">DOMNodeInserted</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMNodeInserted">W3C Draft</a></p>
<h3 name="DOMNodeRemoved">DOMNodeRemoved</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMNodeRemoved">W3C Draft</a></p>
<h3 name="DOMNodeRemovedFromDocument">DOMNodeRemovedFromDocument</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMNodeRemovedFromDocument">W3C Draft</a></p>
<h3 name="DOMNodeInsertedIntoDocument">DOMNodeInsertedIntoDocument</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMNodeInsertedIntoDocument">W3C Draft</a></p>
<h3 name="DOMAttrModified">DOMAttrModified</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMAttrModified">W3C Draft</a></p>
<h3 name="DOMCharacterDataModified">DOMCharacterDataModified</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMCharacterDataModified">W3C Draft</a></p>
<h3 name="DOMElementNameChanged">DOMElementNameChanged</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMElementNameChanged">W3C Draft</a></p>
<h3 name="DOMAttributeNameChanged">DOMAttributeNameChanged</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMAttributeNameChanged">W3C Draft</a></p>
<h3 name="DOMActivate">DOMActivate</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMActivate">W3C Draft</a></p>
<h3 name="DOMFocusIn">DOMFocusIn</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMFocusIn">W3C Draft</a></p>
<h3 name="DOMFocusOut">DOMFocusOut</h3>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-DOMFocusOut">W3C Draft</a></p>
<h3 name="online">online</h3>
<p>{{ Fx_minversion_inline("3") }} Can used on <code>window</code>, <code>document</code>, or <code>document.body</code>, see <a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online_and_offline_events</a>.</p>
<p>Specification: <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG HTML 5 DRAFT</a></p>
<h3 name="offline">offline</h3>
<p>{{ Fx_minversion_inline("3") }} Can used on <code>window</code>, <code>document</code>, or <code>document.body</code>, see <a href="/en/Online_and_offline_events" title="en/Online_and_offline_events">Online_and_offline_events</a>.</p>
<p>Specification: <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#offline">WHATWG HTML 5 DRAFT</a></p>
<h3 name="textInput">textInput</h3>
<p>This is the same as <a href="/en/DOM/element.onkeypress" title="en/DOM/element.onkeypress">onkeypress</a>.</p>
<div class="note"><strong>Note:</strong> <code>textInput</code> is not implemented in Gecko.</div>
<p>Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Events/events.html#event-textInput">W3C Draft</a></p><h3 name="Example">Example</h3>
<p>Following code will display the time of last DOM Change on the title bar of the page. </p>
<div class="warning">Be very careful with this event it is easy to cause an infinite loop if you decide to change the DOM inside the event handler.</div>
<p>{{ syntax.JavaScript{code: "document.body.addEventListener(\"DOMSubtreeModified\", function(){document.title=\"DOM Changed at \" + new Date()}, false);"} }}</p>
<h3 name="See_also">See also</h3>
<p><a href="/en/DOM/element#Event_Handlers" title="en/DOM/element#Event_Handlers">Event Handlers</a>, <a href="/en/Gecko-Specific_DOM_Events" title="en/Gecko-Specific_DOM_Events">Gecko-Specific DOM Events</a></p> <p>{{ languages( { "ja": "ja/DOM_Events" } ) }}</p>
Revert to this revision