MutationObserver를 한 번 더 작동 시키려면 어떻게해야합니까?

Question

MutationObserver를 사용하여 div에 변경 사항을 적용시킬 수 있습니다. 바로 아래에있는 div에 표시된 변경 사항을 변경하지만 한 번만 실행됩니다. 입력 div를 div로 지정할 내용을 입력하면 첫 번째 문자 만 표시됩니다. MDN에서 이것을 찾았습니다.

"요소에 관찰자를 추가하는 것은 addEventListener와 같습니다. 요소를 여러 번 관찰하면 차이가 없습니다. 요소를 두 번 관찰하면 관찰 콜백이 실행되지 않습니다. 두 번이나 disconnect()를 두 번 실행하지 않아도됩니다. 즉, 요소가 관찰되면 동일한 관찰자 인스턴스로 다시 관찰하면 아무 일도 일어나지 않습니다. 그러나 콜백 객체가 다를 경우 다른 관찰자를 추가 할 것입니다. 그것."

그러나이 문제를 해결하는 방법을 잘 모르겠습니다. 첫 번째 관찰자의 콜백에서 새로운 관찰자를 만들려고했는데, 그것이 관찰자 체인을 만들 겠다는 희망을 가지고 있지만 이것은 효과가 없습니다. 다른 사람들이 어떻게 이것을 해결 했습니까?

<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 자체가 없습니다. characterData 변이가있는 것은 입력 내에 Text nodes입니다.

그러면 childList가 해제됩니다. 이 노드를 사용하면 첫 번째 문자를 입력하거나 Enter 키를 누르거나 선을 삭제할 때 노드가 입력에 추가되거나 제거 될 때만 옵저버가 트리거됩니다. 모든 돌연변이가 지금 CharacterData를 할 수 있기 때문에 관찰자 콜백에

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

제거 조건 :

는 config로 변경하여 입력의 후손 보는 관찰자에게, 그것을 해결하려면. 사실 당신은이 작업을 수행 할 수 있습니다

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

을 당신이 많은 돌연변이가 마지막으로, 단지 현재 값 이후에 발생한 어떻게 상관 없어 때문이다.