Tek bir MutationObserver nesnesi birden çok hedefi gözlemleyebilir mi?

Question

Bazı DOM düğümlerimdeki değişiklikleri gözlemlemek için MutationObserver nesnesini kullanmak istiyorum.

Dokümanlar, bir MutationObserver nesnesi oluşturma ve bir hedefe kaydetme örneği verir.

// 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); 

---

yukarıda kod var ki, ama sadece bunun altında ben bu kodu yerleştirebilirsiniz:

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

Will observer:

• şimdi olmak 2 hedeflerini gözlemleyerek? target izlemeye son vermeyecek mi?
• target2 gözlemlememeye karar verecek mi?
• hata veriyor mu?
• veya başka bir davranış sergileyecek mi?

Answer 1

Gözlemciler, tanımlarınız için iki hedefi - target ve target2 izleyecekler. Hiçbir hata atılmayacak ve target, target2 lehine "kayıtsız" olmayacaktır. Beklenmeyen ya da başka davranışlar sergilenmeyecektir.

İşte iki toparlanabilir öğe üzerinde aynı MutationObserver kullanan bir örnek. Bunu görüntülemek için, her contenteditable öğesinden <span> düğümünü silin ve gözlenen her iki öğedeki davranış açıklığını görüntüleyin.

<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

- Yeni bir yapılandırma yerleştirerek, bu ilk demo için aynı yapılandırma geri dönüşümlü, ama demo

Not gözlenilen elemana özel olacak. Örneğinizi config2'da tanımlandığı şekilde alarak, #myTextArea2'da kullanılıyorsa, yapılandırma seçenekleri için günlüğe kaydedilmiş düğümü göremezsiniz, ancak #myTextArea gözlemcisinin etkilenmediğini fark edersiniz.

JSFiddle Link - demo - yapılandırma seçkinlik