如何让 MutationObserver 工作不止一次？

Question

我使用 MutationObserver，这样我就可以 div 对变化做出反应。当它更改显示在 div 正下方的更改时，但是它只运行一次。如果我在输入 div 中键入内容 div，则只显示第一个字符。我在 MDN

上找到了这个

"Adding an observer to an element is just like addEventListener, if you observe the element multiple times it does not make a difference. Meaning if you observe an element twice, the observe callback does not fire twice, nor will you have to run disconnect() twice. In other words, once an element is observed, observing it again with the same observer instance will do nothing. However if the callback object is different it will of course add another observer to it."

但是我不确定如何解决这个问题。我尝试在第一个观察者的回调中创建一个新的观察者，希望它能创建一个观察者链，但这没有用。其他人是如何解决这个问题的？

    <div contenteditable="true" class="input"></div>
    <div class="display"></div>

    <script>
        let input= document.getElementsByClassName("input")[0];
        let display= document.getElementsByClassName("display")[0];

        let config={attributes:true, childList:true, characterData:true};

        let observer= new MutationObserver(function(mutations){
                mutations.forEach(function(mutation){
                if(mutation.type==="childList"){
                    display.textContent=input.textContent;
                }
                });

        });         

        observer.observe(input,config); 
    </script>

Answer 1

您告诉观察者观察输入上的 childList 和 characterData 突变，但输入本身没有 characterData。输入中的 Text nodes 具有 characterData 突变。

这就剩下了 childList。有了它，只有在输入中添加或删除节点时才会触发您的观察者（当您键入第一个字符时，按回车键或删除一行）。

要修复它，请通过将 config 更改为：

告诉观察者查看输入的后代

{attributes:false, childList:false, subtree: true, characterData:true}

并删除观察者回调中的条件，因为现在所有突变都将是 characterData。其实你可以这样做：

let observer= new MutationObserver(function(mutations){
    display.textContent=input.textContent;
});

因为你不关心自上次以来发生了多少突变，只关心当前值。

如何让 MutationObserver 工作不止一次？

How do I make a MutationObserver work more then once?

javascript

mutation-observers