变异观察者不会做任何事情，但不会显示错误

Question

嗨，

我有这个代码：

<div id="container" data-room="room1">some content</div>
<button onclick="changeroom('room2');">Change</button>

并且这个变异观察器应该在数据室中的数据发生变化时执行一个函数

new MutationObserver(() => {
      const lastroom = "room1"; 
      if (document.getElementById("container").dataset.room !== "room1") {
      console.log('changed room')
      }
     }).observe(document, {subtree: true, childList: true});

但它什么也没做。你可以在这里测试它：https://jsfiddle.net/5hdjfg4t/

这是为什么？

谢谢。

Answer 1

您没有添加或删除任何元素，因此 childList 的观察者不会触发。您需要观察 attributes 的变化。

const container = document.getElementById("container");

function changeroom(room) {
  container.dataset.room = room;
}

new MutationObserver(() => {
  if (container.dataset.room !== "room1") {
    console.log('changed room')
  }
}).observe(container, {
  attributes: true
});

<div id="container" data-room="room1">some content</div>
<button onclick="changeroom('room2');">
Change
</button>

Answer 2

好吧，你正在更改一个属性，但你没有告诉它监听属性更改

subtree: true, 
childList: true,
attributes: true,

变异观察者不会做任何事情，但不会显示错误

mutation observer wont do anything but no error is shown

javascript

mutation-observers