为啥在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？

Posted 2023-05-07

【中文标题】为啥在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？

【英文标题】：Why is the DOMSubtreeModified event deprecated in DOM level 3?为什么在 DOM 级别 3 中不推荐使用 DOMSubtreeModified 事件？

【发布时间】：2011-10-03 07:58:04

【问题描述】：

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

【参考方案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);