MutationEvent
Deprecated
To be removed
This feature is pending removal from browsers. Using it now may lead to broken functionality in future updates. Mutation events negatively impact performance and they were selected for removal from the web as part of Interop 2025.
Use the following features instead: MutationObserver.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
The MutationEvent interface provides event properties that are specific to modifications to the Document Object Model (DOM) hierarchy and nodes.
Note: Using mutation events is problematic:
- Their design is flawed.
- 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.
- They have poor cross-browser compatibility: Safari doesn't support
DOMAttrModified(see WebKit bug 8191) and Firefox doesn't support mutation name events (likeDOMElementNameChangedandDOMAttributeNameChanged).
They have been deprecated in favor of mutation observers. Consider using these instead.
Instance properties
This interface also inherits properties from its parent UIEvent, and indirectly from Event.
MutationEvent.attrChangeRead only-
Indicates what kind of change triggered the
DOMAttrModifiedevent. It can beMODIFICATION(1),ADDITION(2) orREMOVAL(3). It has no meaning for other events and is then set to0. MutationEvent.attrNameRead only-
Indicates the name of the node affected by the
DOMAttrModifiedevent. It has no meaning for other events and is then set to the empty string (""). MutationEvent.newValueRead only-
In
DOMAttrModifiedevents, contains the new value of the modifiedAttrnode. InDOMCharacterDataModifiedevents, contains the new value of the modifiedCharacterDatanode. In all other cases, returns the empty string (""). MutationEvent.prevValueRead only-
In
DOMAttrModifiedevents, contains the previous value of the modifiedAttrnode. InDOMCharacterDataModifiedevents, contains previous new value of the modifiedCharacterDatanode. In all other cases, returns the empty string (""). -
Indicates the node related to the event, like the changed node inside the subtree for
DOMSubtreeModified.
Instance methods
MutationEvent.initMutationEvent()-
Constructor method that returns a new
MutationEventconfigured with the parameters given.
Mutation events list
The following is a list of all mutation events:
DOMAttrModified(Not supported by Safari)DOMAttributeNameChanged(Not supported by Firefox)DOMCharacterDataModifiedDOMElementNameChanged(Not supported by Firefox)DOMNodeInsertedDOMNodeInsertedIntoDocumentDOMNodeRemovedDOMNodeRemovedFromDocumentDOMSubtreeModified
Examples
You can register a listener for mutation events using EventTarget.addEventListener() as follows:
element.addEventListener("DOMNodeInserted", (event) => {
// …
});