MutationEvent

The MutationEvent interface provides event properties that are specific to modifications to the Document Object Model (DOM) hierarchy and nodes.

The mutation events have been marked as deprecated in the DOM Events specification, as the API's design is flawed (see details in the "DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" post to public-webapps).

Mutation Observers have replaced mutation events in DOM4. They have been supported in most popular browsers for some years.

In addition, mutation events should be avoided because they have performance issues and poor cross-browser support (as described in the following sections).

Adding DOM mutation listeners to a document profoundly degrades the performance of further DOM modifications to that document (making them 1.5 - 7 times slower!). Moreover, removing the listeners does not reverse the damage.

The performance effect is limited to the documents that have the mutation event listeners.

These events are not implemented consistently across different browsers, for example:

• IE prior to version 9 didn't support the mutation events at all and does not implement some of them correctly in version 9 (for example, DOMNodeInserted)
• WebKit doesn't support DOMAttrModified (see webkit bug 8191 and the workaround)
• "mutation name events", i.e. DOMElementNameChanged and DOMAttributeNameChanged are not supported in Firefox (as of version 11), and probably in other browsers as well.
• ...

Dottoro documents browser support for mutation events.

The following is a list of all mutation events, as defined in DOM Level 3 Events specification:

• DOMAttrModified
• DOMAttributeNameChanged
• DOMCharacterDataModified
• DOMElementNameChanged
• DOMNodeInserted
• DOMNodeInsertedIntoDocument
• DOMNodeRemoved
• DOMNodeRemovedFromDocument
• DOMSubtreeModified

You can register a listener for mutation events using EventTarget.addEventListener() as follows:

element.addEventListener("DOMNodeInserted", function (event) {
  // ...
}, false);

The event object is passed to the listener in a MutationEvent (see its definition in the specification) for most events, and MutationNameEvent for DOMAttributeNameChanged and DOMElementNameChanged.

• MutationNameEvent