MutationObserver не работает

Рассмотрим следующий код:

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>

Ответы

Ответ 1

Он не работает, потому что вы не мутируете ничего, что вы наблюдаете. Вы не меняете

  • (attributes: true) document node (что понятно, поскольку document не имеет атрибутов)
  • дочерние узлы (childList: true): единственным дочерним node document является <html> node, и вы не удаляете и не заменяете его.
  • символьные данные (characterData: true): вы не меняете никаких файлов Text, Comment или ProcessingInstruction из document (также понятно, потому что document не может иметь таких детей).

Если вы замените <html> node, вы увидите, что наблюдатель мутаций работает так же, как и настроено.

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