Question

请考虑以下代码：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target.nodeName);
  });
});

observer.observe(document, {
  attributes: true,
  childList: true,
  characterData: true
});

<div>
  <ol contenteditable oninput="">
    <li>Press enter</li>
  </ol>
</div>

这是this的略微修改。

与jsbin version页面交互不会产生任何日志。我哪里错了？请注意，如果我替换行

  observer.observe(document, {

与

  observer.observe(document.querySelector('ol'), {

脚本开启工作......

Answer 1

它似乎不起作用，因为你没有改变你正在观察的任何东西。你既没有改变

attributes: true节点的属性（document）（这是可以理解的，因为document没有属性）
子节点（childList: true）：document的唯一子节点是<html>节点，您不会删除或替换它。
字符数据（characterData: true）：您没有更改document的任何Text，Comment或ProcessingInstruction子项（也可以理解，因为document不能有这样的子项）。

如果替换<html>节点，则可以看到变异观察器的工作方式与配置相同。

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target.nodeName);
  });
});

observer.observe(document, {
  attributes: true,
  childList: true,
  characterData: true
});

document.replaceChild(document.createElement('div'), document.documentElement);

您正在做的是更改ol元素的内容，document元素是subtree的后代。

如果您想听取这些更改，则必须将observer.observe(document, { attributes: true, childList: true, subtree: true, characterData: true });设置为true：

var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.target.nodeName);
  });
});

observer.observe(document, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

MDN documentation。

中的更多信息

<div>
  <ol contenteditable oninput="">
    <li>Press enter</li>
  </ol>
</div>

removeObjectForKey:

MutationObserver无法正常工作

1 个答案: