MutationEvent
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see thecompatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
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.
TheMutationEvent interface provides event properties that are specific to modifications to the Document Object Model (DOM) hierarchy and nodes.
Note:Usingmutation events is problematic:
- Their design isflawed.
- Adding DOM mutation listeners to a documentprofoundly 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(seeWebKit bug 8191) and Firefox doesn't supportmutation name events (likeDOMElementNameChangedandDOMAttributeNameChanged).
They have been deprecated in favor ofmutation observers.Consider using these instead.
Instance properties
This interface also inherits properties from its parentUIEvent, and indirectly fromEvent.
MutationEvent.attrChangeRead onlyDeprecatedNon-standardIndicates 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 onlyDeprecatedNon-standardIndicates 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 onlyDeprecatedNon-standardIn
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 onlyDeprecatedNon-standardIn
DOMAttrModifiedevents, contains the previous value of the modifiedAttrnode. InDOMCharacterDataModifiedevents, contains previous new value of the modifiedCharacterDatanode. In all other cases, returns the empty string ("").MutationEvent.relatedNodeRead onlyDeprecatedNon-standardIndicates the node related to the event, like the changed node inside the subtree for
DOMSubtreeModified.
Instance methods
MutationEvent.initMutationEvent()DeprecatedNon-standardConstructor 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 usingEventTarget.addEventListener() as follows:
element.addEventListener("DOMNodeInserted", (event) => { // …});