使用自定义事件跟踪属性更改

Question

我的问题是我想使用自定义事件跟踪元素的属性更改，我一直在阅读Mozilla开发人员，我仍然没有得到它。

那么，自定义事件如何运作？以及如何使用它来跟踪属性变化/变量（类的）。

Answer 1

Standard event listeners会回复很多事情，但元素属性更改不是其中之一。 MutationObserver实际上是自己构建类似内容的唯一方法，缺少资源密集型setInterval虚假侦听器。

var target = document.querySelector('button');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.attributeName + ' atrribute was changed.');
  });    
});

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

这是一个JSFiddle，其中按钮单击会更改元素的颜色，该颜色由MutationObserver拾取。