为什么在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？答案

【问题标题】：Why is the DOMSubtreeModified event deprecated in DOM level 3?为什么在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？
【发布时间】：2011-10-03 07:58:04
【问题描述】：

为什么是 DOMSubtreeModified 事件 deprecated 而我们应该使用什么来代替？

【问题讨论】：

标签： javascript dom javascript-events deprecated dom3

【解决方案1】：

如果你scroll down a bit，你会看到：

警告！ MutationEvent 接口是在 DOM Level 2 中引入的事件，但尚未完全且可互操作地实施跨用户代理。此外，也有人批评说按照设计，接口引入了性能和实现挑战。一个新的规范正在开发中，目的是解决突变事件解决的用例，但在更多高性能的方式。因此，本规范描述了突变事件用于参考和遗留行为的完整性，但不推荐使用使用MutationEvent 接口和MutationNameEvent 界面。

替换 API 是 mutation observers，它完全指定了 in the DOM Living Standard，它取代了所有 DOM 级别的 X 愚蠢。

【讨论】：

@TJ - 没有失望。上面的一个是DOMNodeRemovedFromDocument。 :-)
替换将出现在 DOM Level 4 dvcs.w3.org/hg/domcore/raw-file/tip/… 中，Chromium 似乎有一些进展bugs.webkit.org/show_bug.cgi?id=73851
替换MutationEvent 接口的好方法是animationStart and some CSS。
animationStart 的问题，它只适用于节点的插入。不适用于节点删除、属性编辑或文本更改。它也是单节点的，DOMSubtreeModified 允许从根节点观察整个树。

【解决方案2】：

我认为替代者将是突变观察者：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

var whatToObserve = {childList: true, attributes: true, subtree: true, attributeOldValue: true, attributeFilter: ['class', 'style']};
var mutationObserver = new MutationObserver(function(mutationRecords) {
  $.each(mutationRecords, function(index, mutationRecord) {
    if (mutationRecord.type === 'childList') {
      if (mutationRecord.addedNodes.length > 0) {
        //DOM node added, do something
      }
      else if (mutationRecord.removedNodes.length > 0) {
        //DOM node removed, do something
      }
    }
    else if (mutationRecord.type === 'attributes') {
      if (mutationRecord.attributeName === 'class') {
        //class changed, do something
      }
    }
  });
});
mutationObserver.observe(document.body, whatToObserve);

【讨论】：