一个MutationObserver对象可以观察多个目标吗？

发布时间：2020-12-14 21:42:47 所属栏目：资源来源：网络整理

导读：我想使用一个 MutationObserver 对象来观察我的一些DOM节点的变化。该文档给出了创建MutationObserver对象并将其注册到目标上的示例。 // select the target nodevar target = document.querySelector('#some-id');// create an observer instancevar obser

我想使用一个 MutationObserver对象来观察我的一些DOM节点的变化。

该文档给出了创建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);

说我有上面的代码，但在它下面，我放这个代码：

var target2 = document.querySelector('#some-other-id');
var config2 = {attributes: true,subtree: true};
observer.observe(target2,config2);

观察员：

>现在正在观察2个目标？
>会不会停止观察目标？
>它会决定不遵守target2吗？
会不会有错误？
>还是会表现出其他一些行为？

解决方法

观察员现在将按照您的定义观察两个目标 – 目标和目标2。没有错误将被抛出，目标将不会被“未注册”赞成target2。不会出现任何意外或其他行为。

这是一个在两个可容求元素上使用相同MutationObserver的示例。要查看此内容，请删除< span>节点，并查看两个观察元素之间的行为跨度。

<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,characterData: true };

observer.observe($('#myTextArea')[0],config);

observer.observe($('#myTextArea2')[0],config);

JSFiddle Link – 演示

请注意，我已经为此第一个演示回收了相同的配置，但是放置一个新的配置将是该观察元素的排他。以config2中定义的示例为例，如果在#myTextArea2上使用，您将看不到配置选项中记录的节点，但注意#myTextArea的观察者不受影响。

JSFiddle Link – 演示 – 配置排他性

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!