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

Posted 2023-02-19

【中文标题】JavaScript 中的简单变异观察者示例不起作用

【英文标题】：Simple mutation observer example in JavaScript doesn't work

【发布时间】：2015-07-05 14:56:27

【问题描述】：

我尝试在我的网页中添加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">

【问题讨论】：

您尝试了哪些浏览器？支持很好但不是无处不在 - caniuse.com/#feat=mutationobserver

我用谷歌浏览器试试

【参考方案1】：

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

Quote from 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">

【讨论】：

在 Dom 加载时是否必须有目标才能使用此程序？如果目标元素被另一种方法附加，它会起作用吗？

@JithinB 打开一个新问题，提供必要的细节，一切顺利