监听 DOM 事件（特定属性）答案

【问题标题】：Listening to DOM events (specific attributes)监听 DOM 事件（特定属性）
【发布时间】：2016-08-24 12:24:08
【问题描述】：

我需要在添加特定属性时获取数据。我读过这篇文章：Is there a JavaScript/jQuery DOM change listener?

  var observer = new MutationObserver(function (mutations, observer) {
    // fired when a mutation occurs
     $.each(mutations, function(index, mutation) {

      var post = $(mutation.target).find('div[class^="ContentWrapper"]');


     });
  });
  observer.observe(document, {
    subtree: true,
    attributes: true

  });

这种方法有一个问题，因为有很多事件并且扩展很慢，是否有一个选项来过滤突变，按特定属性？

【问题讨论】：

How to react to a specific style attribute change with mutation observers?的可能重复
这是限制属性观察的唯一方法。要有创意。不要观察整个文档，例如在父容器上进行。
也永远不要在突变观察者中使用 jQuery 和其他怪物包装器，切换到直接 DOM 访问：for (var i=0; ....) { var post=mutations[i].target.getElementsByClassName('ContentWrapper')[0]; ...... }
另外，如果您可以观察添加节点的直接父元素（然后附加另一个观察者以观察每个添加节点上的属性），那么您将不需要subtree: true, 所以您的观察者即使使用 jQuery 也会非常快。
@wOxxOm 谢谢你，特别是提出不使用 jquery 的问题！

标签： javascript google-chrome-extension mutation-observers

【解决方案1】：

在 MutationObserverInit 选项中使用 attributeFilter。将其设置为您要侦听的属性数组，如下所示：

var attributeSpecificObserver=new MutationObserver(function_you_want_observing);
attributeSpecificObserver.observe( element_you_want_to_observe, {
    attributes: true,
    attributeFilter: ['id', 'class', 'style', 'etc'],
} );

来源：Mozilla Developer Network (MDN)。

【讨论】：

显然，如果您只想不听一些属性，您必须手动过滤掉它们？
是的，attributeFilter 是选择加入，而不是选择退出。