JavaScript中的简单变异观察器示例不起作用

Question

我尝试在我的网页中添加MutationObserver来跟踪图像src更改，但这不起作用。

这是使用的代码：

 setTimeout(function() { document.getElementById("img").src = "http://i.stack.imgur.com/aQsv7.jpg" }, 2000); var target = document.querySelector('#img'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); var config = { attributes: true, childList: false, characterData: false }; observer.observe(target, config); observer.disconnect(); 

 <img src="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100"> 

Answer 1

如果您调用disconnect方法，您将不再收到通知：

来自MDN的报价

disconnect()

阻止MutationObserver实例接收DOM突变的通知。 在再次使用observe（）方法之前，将不会调用观察者的回调。

 setTimeout(function() { document.getElementById("img").src = "http://i.stack.imgur.com/aQsv7.jpg" }, 2000); setTimeout(function() { document.getElementById("img").src = "http://i.imgur.com/Xw6htaT.jpg" }, 4000); var target = document.querySelector('#img'); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(mutation) { console.log(mutation.type); }); }); var config = { attributes: true, childList: true, characterData: true }; observer.observe(target, config); // otherwise observer.disconnect(); observer.observe(target, config); 

 <img src="http://i.stack.imgur.com/k7HT5.jpg" id="img" class="pic" height="100">