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 the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.

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* (like `DOMElementNameChanged` and `DOMAttributeNameChanged`).

They have been deprecated in favor of mutation observers. **Consider using these instead.**

Event

MutationEventInstance properties
-------------------

*This interface also inherits properties from its parent `UIEvent`, and indirectly from `Event`.*

`MutationEvent.attrChange` Read only  
Deprecated

Indicates what kind of change triggered the `DOMAttrModified` event. It can be `MODIFICATION` (`1`), `ADDITION` (`2`) or `REMOVAL` (`3`). It has no meaning for other events and is then set to `0`.

`MutationEvent.attrName` Read only  
Deprecated

Indicates the name of the node affected by the `DOMAttrModified` event. It has no meaning for other events and is then set to the empty string (`""`).

`MutationEvent.newValue` Read only  
Deprecated

In `DOMAttrModified` events, contains the new value of the modified `Attr` node. In `DOMCharacterDataModified` events, contains the new value of the modified `CharacterData` node. In all other cases, returns the empty string (`""`).

`MutationEvent.prevValue` Read only  
Deprecated

In `DOMAttrModified` events, contains the previous value of the modified `Attr` node. In `DOMCharacterDataModified` events, contains previous new value of the modified`CharacterData` node. In all other cases, returns the empty string (`""`).

`MutationEvent.relatedNode` Read only  
Deprecated

Indicates the node related to the event, like the changed node inside the subtree for `DOMSubtreeModified`.

Instance methods
----------------

`MutationEvent.initMutationEvent()` 
Deprecated

Constructor method that returns a new `MutationEvent` configured 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)
* `DOMCharacterDataModified`
* `DOMElementNameChanged` (Not supported by Firefox)
* `DOMNodeInserted`
* `DOMNodeInsertedIntoDocument`
* `DOMNodeRemoved`
* `DOMNodeRemovedFromDocument`
* `DOMSubtreeModified`
Examples
--------

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


```js
element.addEventListener(
  "DOMNodeInserted",
  (event) => {
    // …
  },
  false,
);
```

Specifications
--------------

| Specification |
| --- |
| UI Events # interface-mutationevent |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `MutationObserver`