DOM 变异事件 当时看起来是个好主意——随着 Web 开发人员创建更动态的 Web，我们自然会欢迎能够监听 DOM 中的变化并对其做出反应的能力。然而，在实践中，DOM 变异事件是一个主要的性能和稳定性问题，并且已经弃用了一年多。

然而，DOM 变异事件背后的最初想法仍然很有吸引力，因此在 2011 年 9 月，一群 Google 和 Mozilla 工程师宣布了 一项新的提案，该提案将提供类似的功能，但性能有所提高：DOM MutationObserver。这个新的 DOM API 在 Firefox 和 Webkit nightly 版本以及 Chrome 18 中可用。

最简单的 MutationObserver 实现如下所示

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.log(mutation.type);
    });
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true }

// pass in the target node, as well as the observer options
observer.observe(target, config);

// later, you can stop observing
observer.disconnect();

与已弃用的 DOM 变异事件规范相比，这个新规范的主要优势在于效率。如果您正在观察节点的变化，则只有在 DOM 完成变化后才会触发您的回调函数。当回调函数被触发时，它会提供一个 DOM 更改列表，然后您可以遍历该列表并选择做出反应。

这也意味着您编写的任何代码都需要处理观察者结果才能对您正在寻找的更改做出反应。这是一个监听可编辑有序列表中更改的观察者的简洁示例

  
Press enter

如果您想查看此代码的运行情况，我已经将其发布在 jsbin 上

http://jsbin.com/ivamoh/53/edit

如果您使用此示例，您会注意到一些行为上的怪癖，特别是当您在每个 li 中按下 Enter 键时，回调函数会被触发，尤其是在用户操作导致节点从 DOM 中添加或移除时。这与其他技术（例如将事件绑定到按键或更常见的事件（如“click”））之间存在重要区别。MutationObservers 的工作方式与这些技术不同，因为它们是由 DOM 本身的变化触发的，而不是由通过 JS 或用户交互生成的事件触发的。

那么这些有什么用呢？

我不希望大多数 JS 开发人员现在就开始在他们的代码中添加 MutationObserver。可能这个新 API 最大的受众是编写 JS 框架的人，主要用于解决问题并创建他们以前无法完成的交互，或者至少不能以合理的性能完成。另一个用例是您使用操纵 DOM 的框架并需要高效地（并且无需 setTimeout hacks！）对这些修改做出反应的情况。

Dom 变异事件 API 的另一个常见用途是在浏览器扩展中，在接下来的一周左右，我将发布一篇后续文章，介绍 MutationObservers 在与 Firefox 附加组件中的 Web 内容交互时如何特别有用。

资源

• 原始提案
• W3C 规范
• 屏幕录制 由 Rafael Weinstein 提供
• Mutation Summary，一个简化 MutationObserver 用法的 JS 库。