DOMSubtreeModified事件在DOM Level 3中为何被废弃？

Question

为什么DOMSubtreeModified事件被废弃了，我们应该使用什么替代它？请参考此链接。

- huyz

Answer 1

如果向下滚动一点, 您会看到:

警告! MutationEvent接口是在DOM Level 2 Events中引入的，但尚未在所有用户代理中完全和互操作地实现。此外，有人批评该接口的设计引入了性能和实现挑战。正在制定一个新规范，旨在解决变异事件解决的用例，但以更高效的方式。因此，本规范描述了变异事件以参考和完整性的遗留行为，但不建议使用MutationEvent接口和MutationNameEvent接口。

替代API是变异观察器, 它们在DOM Living Standard中得到了完全的规定，这取代了所有DOM级别X的愚蠢。

- Domenic

---

@ TJ - 不要往下翻。上面那个是DOMNodeRemovedFromDocument。:-) - RobG

替代方案将在DOM Level 4中提供 http://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers ，而且在Chromium中似乎已经取得了一些进展 https://bugs.webkit.org/show_bug.cgi?id=73851。 - Hrant Khachatrian

一个很好的替换 MutationEvent 接口的技巧是使用 animationStart 以及一些 CSS。 - Andres Riofrio

animationStart 的问题在于它仅适用于节点插入，而对于节点删除、属性编辑或文本更改则无效。它还是单个节点的，而 DOMSubtreeModified 允许从根节点观察整个树。 - xmo

Answer 2

我认为替代方案将是Mutation Observers：https://developer.mozilla.org/zh-CN/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);

- ralfthewise

---

我不明白这样做有什么改进。实现相同结果所需的代码似乎更大、更难理解，而且我不理解其内部工作原理的好处。 - S. Dre