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

Question

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

Answer 1

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

警告！该MutationEvent接口是在 DOM Level 2 事件中引入的，但尚未在用户代理之间完全且可互操作地实现。此外，也有人批评该接口在设计时引入了性能和实现方面的挑战。一个新的规范正在开发中，旨在解决突变事件解决的用例，但以更高效的方式。因此，本规范描述了突变事件以供参考和遗留行为的完整性，但不赞成同时使用MutationEvent接口和MutationNameEvent 接口。

替代 API 是突变观察者，它在 DOM 生活标准中完全指定，它取代了所有 DOM 级别的 X 愚蠢。

Answer 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);