MutationEvent

已弃用：此功能不再推荐使用。尽管一些浏览器可能仍然支持它，但它可能已被从相关的 Web 标准中删除，可能正在被删除，或者可能只保留用于兼容性目的。请避免使用它，并尽可能更新现有代码；请查看此页面底部的兼容性表，以指导您的决策。请注意，此功能可能随时停止工作。

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

注意：使用Mutation 事件存在问题

  • 它们的设计有缺陷。
  • 将 DOM Mutation 监听器添加到文档中会严重降低对该文档的进一步 DOM 修改的性能（使它们慢 1.5 - 7 倍！）。此外，删除监听器不会逆转损害。
  • 它们具有较差的跨浏览器兼容性：Safari 不支持 DOMAttrModified（参见WebKit 错误 8191），而 Firefox 不支持Mutation 名称事件（如 DOMElementNameChanged 和 DOMAttributeNameChanged）。

它们已被Mutation 观察者弃用。考虑使用它们代替。

Event MutationEvent

实例属性

此接口还从其父级UIEvent继承属性，并间接地从Event继承属性。

MutationEvent.attrChange 只读

指示触发 DOMAttrModified 事件的更改类型。它可以是 MODIFICATION（1）、ADDITION（2）或 REMOVAL（3）。它对其他事件没有意义，因此被设置为 0。

MutationEvent.attrName 只读

指示受 DOMAttrModified 事件影响的节点的名称。它对其他事件没有意义，因此被设置为空字符串 ("")。

MutationEvent.newValue 只读

在 DOMAttrModified 事件中，包含已修改的Attr 节点的新的值。在 DOMCharacterDataModified 事件中，包含已修改的CharacterData 节点的新的值。在所有其他情况下，返回空字符串 ("")。

MutationEvent.prevValue 只读

在 DOMAttrModified 事件中，包含已修改的Attr 节点的先前值。在 DOMCharacterDataModified 事件中，包含已修改的CharacterData 节点的先前值。在所有其他情况下，返回空字符串 ("")。

MutationEvent.relatedNode 只读

指示与事件相关的节点，例如 DOMSubtreeModified 的子树中更改的节点。

实例方法

MutationEvent.initMutationEvent()

构造函数方法，返回使用给定参数配置的新 MutationEvent。

Mutation 事件列表

以下是所有 Mutation 事件的列表

  • DOMAttrModified（Safari 不支持）
  • DOMAttributeNameChanged（Firefox 不支持）
  • DOMCharacterDataModified
  • DOMElementNameChanged（Firefox 不支持）
  • DOMNodeInserted
  • DOMNodeInsertedIntoDocument
  • DOMNodeRemoved
  • DOMNodeRemovedFromDocument
  • DOMSubtreeModified

示例

您可以使用 EventTarget.addEventListener() 注册 Mutation 事件的监听器，如下所示

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

规范

规范
UI 事件
# interface-mutationevent

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅