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");
      // Example of accessing the element for which 
      // event was triggered
      mutation.target.textContent = "Attribute of the element changed";
    }
    
    console.log(mutation.target);
  });
});
observer.observe(element, {
  attributes: true //configure it to listen to attribute changes
});

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

此外，mutation.target 属性提供了对突变/更改节点的引用。

Answer 2

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

注意 这是某种黑客解决方案，但对于（至少）调试目的相当不错。

您可以覆盖特定元素的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); 
};