JavaScript：监听属性变化？

Question

JavaScript 是否可以监听属性值的变化？ 例如：

var element=document.querySelector('…');
element.addEventListener( ? ,doit,false);

element.setAttribute('something','whatever');

function doit() {

}

我想回应something属性的任何变化。

我已经阅读了MutationObserver对象，以及该对象的替代方法（包括使用动画事件的对象）。 据我所知，它们是关于对实际 DOM 的更改。 我对特定 DOM 元素的属性更改更感兴趣，所以我不认为就是这样。 当然，在我的实验中，它似乎不起作用。

我想在没有jQuery 的情况下做到这一点。

谢谢

Answer 1

您需要MutationObserver ，在片段中我使用setTimeout来模拟修改属性

 var element = document.querySelector('#test'); setTimeout(function() { element.setAttribute('data-text', 'whatever'); }, 5000) var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { if (mutation.type === "attributes") { console.log("attributes changed") } }); }); observer.observe(element, { attributes: true //configure it to listen to attribute changes });

 <div id="test">Dummy Text</div>

Answer 2

这个问题已经回答了，但我想分享我的经验，因为突变观察者没有给我带来需要的见解。

注意这是某种 hacky 解决方案，但对于（至少）调试目的来说非常好。

您可以覆盖特定元素的setAttribute函数。 这样您还可以打印调用堆栈，并了解“谁”更改了属性值：

// select the target element
const target = document.querySelector("#element");
// store the original setAttribute reference
const setAttribute = target.setAttribute;
// override setAttribte
target.setAttribute = (key: string, value: string) => {
  console.trace("--trace");
  // use call, to set the context and prevent illegal invocation errors
  setAttribute.call(target, key, value); 
};