javascript 单个 MutationObserver 对象可以观察多个目标吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30807846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can a single MutationObserver object observe multiple targets?
提问by Luke
I would like to use a MutationObserverobject to observe changes to some of my DOM nodes.
我想使用一个MutationObserver对象来观察我的一些 DOM 节点的变化。
The docs give an example of creating a MutationObserverobject and registering it on a target.
文档给出了创建MutationObserver对象并将其注册到目标上的示例。
// select the target node
var target = document.querySelector('#some-id');
// create an observer instance
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
console.log(mutation.type);
});
});
// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options
observer.observe(target, config);
Say I have the code above, but just under it, I place this code:
假设我有上面的代码，但就在它下面，我放置了以下代码：
var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true, subtree: true};
observer.observe(target2, config2);
Will observer:
将observer：
- now be observing 2 targets?
- will it stop observing
target? - will it decide not to observe
target2? - will it throw an error?
- or will it exhibit some other behavior?
- 现在正在观察 2 个目标？
- 它会停止观察
target吗？ - 它会决定不观察
target2吗？ - 它会抛出错误吗？
- 还是会表现出其他一些行为？
采纳答案by scniro
The observer will now be watching two targets - targetand target2per your definitions. No error will be thrown, and targetwill not be "unregistered" in favor of target2. No unexpected or other behaviors will be exhibited.
观察员现在将关注两个目标-target并target2根据您的定义。不会抛出任何错误，target也不会“取消注册”以支持target2. 不会出现意外或其他行为。
Here is a sample which uses the same MutationObserveron two contenteditable elements. To view this, delete the <span>node from each contenteditableelement and view the behavior span across both observed elements.
这是一个示例，它MutationObserver在两个 contenteditable 元素上使用相同的内容。要查看这一点，请<span>从每个contenteditable元素中删除节点并查看两个观察到的元素的行为跨度。
<div id="myTextArea" contenteditable="true">
<span contenteditable="false">Span A</span>
</div>
<div id="myTextArea2" contenteditable="true">
<span contenteditable="false">Span B</span>
</div>
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
//console.log($(mutation.removedNodes)); // <<-- includes text nodes
$(mutation.removedNodes).each(function(value, index) {
if(this.nodeType === 1) {
console.log(this)
}
});
});
});
var config = { attributes: true, childList: true, characterData: true };
observer.observe($('#myTextArea')[0], config);
observer.observe($('#myTextArea2')[0], config);
JSFiddle Link- demo
JSFiddle 链接- 演示
Note that I have recycled the same config for this first demo, but, placing a new config will be exclusive to that observed element. Taking your example as defined in config2, if used on #myTextArea2, you'll not see the logged node per the configuration options, but notice that the observer for #myTextAreais unaffected.
请注意，我为第一个演示回收了相同的配置，但是，放置新配置将是该观察到的元素所独有的。以 中定义的示例为例config2，如果使用 on #myTextArea2，您将不会看到每个配置选项的记录节点，但请注意观察者#myTextArea不受影响。
JSFiddle Link- demo - configuration exclusiveness
JSFiddle 链接- 演示 - 配置独占性
