突变观察者不工作
Posted
技术标签:
【中文标题】突变观察者不工作【英文标题】：MutationObserver not working 【发布时间】：2015-09-05 22:47:16 【问题描述】：考虑以下代码：
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'),
脚本开始工作...
【问题讨论】：
observer.observe(list, ...) 如何工作？没有这样的变量。
对不起，我已经更正了脚本。 list 出现引用了引用的原始脚本。
【参考方案1】：
它似乎不起作用，因为你没有改变你正在观察的任何东西。你没有改变
document 节点的属性（attributes: true）（这是可以理解的，因为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设置为true：
observer.observe(document,
attributes: true,
childList: true,
subtree: true,
characterData: true
);
更多信息在MDN documentation。
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
);<div>
<ol contenteditable oninput="">
<li>Press enter</li>
</ol>
</div>【讨论】：
您的characterData: true 描述不太正确。 characterData 适用于直接或通过 subtree: true 观察文本/注释/处理指令时，而不是当这些节点类型是观察元素的子节点时。
@loganfsmyth：不确定subtree 如何影响其他设置。感谢您的澄清。以上是关于突变观察者不工作的主要内容，如果未能解决你的问题，请参考以下文章