MutationEvent - 提供特定于修改文档对象模型（DOM）层次结构和节点的事件属性

MutationEvent 接口提供了特定于修改文档对象模型（DOM）层次结构和节点的事件属性。

注意： Mutation Events (W3C DOM Level 3 Events) 已经被弃用，取而代之的是 Mutation Observers (W3C DOM4).

前言

由于 API 的设计存在缺陷，因此在 DOM Events 规范中已将 mutation 事件标记为不推荐使用（请参见 public-webapps 中的 “DOM 突变事件替换：目前为止的故事/共识的现有要点” 中的详细信息）。

在 DOM4 中，建议使用 Mutation Observers 替换突变事件，它们预计将在 Firefox 14 和 Chrome 18 开始可用。

避免使用突变事件的实际原因是性能问题和跨浏览器支持。

性能

向文档中添加 DOM 突变监听器会严重降低对该文档的进一步 DOM 修改的性能（使其速度降低 1.5 - 7倍!）。此外，删除监听器并不能逆转这种情况。

性能影响仅限于具有突变事件监听器的文档。

跨浏览器支持

这些事件并没有在不同的浏览器上一致地实现，例如：

• 在版本 9 之前的 IE 根本不支持突变事件，并且在版本 9 中没有正确地实现其中的一些（例如，例如，DOMNodeInserted）
• WebKit 不支持 DOMAttrModified（参阅 webkit bug 8191 和解决方案）
• “突变名称事件”，即 DOMElementNameChanged 和 DOMAttributeNameChanged 在 Firefox（到第 11 版）中不受支持，可能在其他浏览器中也不受支持。
• ...

浏览器支持突变事件的文档。

突变事件列表

以下所有突变事件的列表，如 DOM Level 3 Events 规范 中定义：

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

使用

您可以使用 EventTarget.addEventListener() 如下来注册突变事件监听器：

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

对于大多数事件，以及 MutationNameEvent 的 DOMAttributeNameChanged 和 DOMElementNameChanged，事件对象通过 MutationEvent （参阅它的规范中的定义）传递给监听器。

相关链接

• MutationNameEvent
• 使用突变事件