JavaScript：倾听属性更改？

JavaScript中可能侦听属性值的更改吗？例如：JavaScript：倾听属性更改？

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

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

function doit() { 

}

我想回应something属性中的任何更改。

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

我想这样做没有 jQuery。

感谢

来源

2017-01-02 Manngo

'MutationObserver'适用于这一点。只需将其配置为侦听属性更改即可。设置它只观察你感兴趣的元素。 – Xufox

你需要MutationObserver，这里摘录我已经使用setTimeout模拟修改属性

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver; 
 

 
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"> 
 
</div>

来源

2017-01-02 10:30:51 Satpal

感谢您的答案和样本。一旦我简化了这一点，我认为这将是通过简单的更改和属性对元素进行更复杂更改的好技术。它使API更简单。你会意识到原始浏览器的一个合理的polyfill吗？ – Manngo

@Manngo，对于原始浏览器，您可以使用[突变事件]（https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events），也可以参阅https://davidwalsh.name/ dom-events-javascript – Satpal

我发现它目前支持IE9，现在的浏览器仍然支持它。再次感谢。 – Manngo

JavaScript：倾听属性更改？

回答

相关问题