복붙노트

[JQUERY] DOM 요소에서 추가 / 제거되는 요소를 탐지하는 방법은 무엇입니까?

JQUERY

DOM 요소에서 추가 / 제거되는 요소를 탐지하는 방법은 무엇입니까?

해결법


  1. 1.@qantas가 ​​제안한 것처럼 돌연변이 옵서버를 사용하십시오.

    @qantas가 ​​제안한 것처럼 돌연변이 옵서버를 사용하십시오.

    다음 방법은 더 이상 사용되지 않습니다

    DomnodeInserted 및 DomnoDeremoved를 사용할 수 있습니다

    $("#parent").on('DOMNodeInserted', function(e) {
        console.log(e.target, ' was inserted');
    });
    
    $("#parent").on('DOMNodeRemoved', function(e) {
        console.log(e.target, ' was removed');
    });
    

    MDN 문서 도구


  2. 2.DomnodeInserted 및 DomnoDeremoved와 같은 돌연변이 사건을 사용하지 마십시오.

    DomnodeInserted 및 DomnoDeremoved와 같은 돌연변이 사건을 사용하지 마십시오.

    대신 IE10과 낮은 (사용할 수있는 가능)을 제외한 모든 현대 브라우저에서 지원되는 DOM 돌연변이 옵서버를 사용하십시오. 돌연변이 관찰자는 디자인의 결함으로 인해 성능이 낮은 것으로 밝혀 졌기 때문에 돌연변이 사건을 대체하기위한 것입니다.

    var x = new MutationObserver(function (e) {
      if (e[0].removedNodes) console.log(1);
    });
    
    x.observe(document.getElementById('parent'), { childList: true });
    

  3. 3.DomSubtreeModified 이벤트를 바인드해야합니다

    DomSubtreeModified 이벤트를 바인드해야합니다

    $("#parent").bind("DOMSubtreeModified",function(){
      console.log('changed');
    });
    

    http://jsfiddle.net/WQeM3/

  4. from https://stackoverflow.com/questions/20156453/how-to-detect-element-being-added-removed-from-dom-element by cc-by-sa and MIT license