We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

已废弃
该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

Mutation 事件 为web页面提供一种机制或扩展,以便在DOM被改变时获得通知。如果可能请用Mutation Observers代替。

前言

这个 mutation 事件在DOM Events 标准 中已被列为反对使用 , 因为在API的设计中有缺陷 (详情见发表于 public-webapps 的"DOM Mutation Events Replacement: The Story So Far / Existing Points of Consensus" )

Mutation Observers 在DOM4中被提议用来取代mutation事件. 预计它们被列入 in Firefox 14 and Chrome 18中。

避免用mutation事件的实际原因是性能问题跨浏览器支持

性能

为DOM添加 mutation 监听器极度降低进一步修改DOM文档的性能(慢1.5 - 7倍),此外, 移除监听器不会逆转的损害。

性能好坏 限制了文档拥有mutation事件监听.

跨浏览器支持

这些事件在不同的浏览器实现并不一致, 例如:

  • IE9之前的版本不支持mutation 事件而且在IE9版本中没有正确实现其中某些事件(例如, DOMNodeInserted)
  • WebKit 不支持 DOMAttrModified (见 webkit bug 8191 和 the workaround)
  • "mutation name events", i.e. DOMElementNameChanged 和 DOMAttributeNameChanged 在Firefox中不被支持 (到 version 11), 可能其他浏览器也是这样.
  • ...

Dottoro documents browser support for mutation events.

Mutation 事件列表

下面是所有 mutation 事件列表, DOM Level 3 Events specification 中定义的:

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

使用

你可以如下所示使用element.addEventListener 注册一个mutation 事件监听器:

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

事件对象在 MutationEvent传递给监听器 (见 its definition in the specification) 对于大多数的事件, 和 MutationNameEvent 用于 DOMAttributeNameChanged and DOMElementNameChanged.

文档标签和贡献者

此页面的贡献者: Pada, peonyriver, FredWe
最后编辑者: Pada,