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

Why is the DOMSubtreeModified event deprecated and what are we supposed to use instead?

为什么不推荐使用DOMSubtreeModified事件？我们应该使用什么？

2 个解决方案

#1

如果向下滚动一下，您会看到：

Warning! The MutationEvent interface was introduced in DOM Level 2 Events, but has not yet been completely and interoperably implemented across user agents. In addition, there have been critiques that the interface, as designed, introduces a performance and implementation challenge. A new specification is under development with the aim of addressing the use cases that mutation events solves, but in more performant manner. Thus, this specification describes mutation events for reference and completeness of legacy behavior, but deprecates the use of both the MutationEvent interface and the MutationNameEvent interface.

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

The replacement API is mutation observers, which are fully specified in the DOM Living Standard that supercedes all of the DOM level X silliness.

替换API是变异观察者，它在DOM Living Standard中完全指定，它取代了所有DOM级别X silliness。

#2

I think the replacement will be mutation observers: https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

我认为替换将是变异观察者：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);

#1

If you scroll down a bit, you see: