[JQUERY] 자바 스크립트 / jQuery를 DOM 변경 리스너가 있습니까?

자바 스크립트 / jQuery를 DOM 변경 리스너가 있습니까?

해결법

1. ---

   1.오랜 시간 동안, DOM3 돌연변이 이벤트는 가능한 최상의 솔루션을했지만, 그들은 성능상의 이유로 사용되지 않습니다. DOM4 돌연변이 관찰자가되지 DOM3 돌연변이 이벤트를 대체합니다. 그들은 현재 MutationObserver으로 현대적인 브라우저에서 구현 (또는 크롬의 이전 버전에서 공급 업체 접두사 WebKitMutationObserver 등) :

   오랜 시간 동안, DOM3 돌연변이 이벤트는 가능한 최상의 솔루션을했지만, 그들은 성능상의 이유로 사용되지 않습니다. DOM4 돌연변이 관찰자가되지 DOM3 돌연변이 이벤트를 대체합니다. 그들은 현재 MutationObserver으로 현대적인 브라우저에서 구현 (또는 크롬의 이전 버전에서 공급 업체 접두사 WebKitMutationObserver 등) :

   MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
   
   var observer = new MutationObserver(function(mutations, observer) {
       // fired when a mutation occurs
       console.log(mutations, observer);
       // ...
   });
   
   // define what element should be observed by the observer
   // and what types of mutations trigger the callback
   observer.observe(document, {
     subtree: true,
     attributes: true
     //...
   });
   

   DOM에 대한이 예제를 기울인다 문서와 전체 하위 트리에 변경하고, 요소는 구조적인 변화뿐만 아니라 속성에 그것은 변화에 실행됩니다. 초안 스펙이 유효 돌연변이 수신기 속성의 전체 목록이 있습니다 :

   (이 목록 4 월 2014 년 기준으로 현재, 당신은 변경 사항에 대한 사양을 확인 할 수 있습니다.)

2. ---

   2.편집하다

   편집하다

   이 답변은 현재 사용되지 않습니다. apsillers에 의해 답변을 참조하십시오.

   이 Chrome 확장을 위해이기 때문에, 당신은뿐만 아니라 표준 DOM 이벤트를 사용할 수 있습니다 - DOMSubtreeModified합니다. 브라우저에서이 이벤트에 대한 지원을 참조하십시오. 그것은 1.0 이후 크롬에서 지원하고있다.

   $("#someDiv").bind("DOMSubtreeModified", function() {
       alert("tree changed");
   });
   

   여기에 작업 예제를 참조하십시오.

3. ---

   3.많은 사이트는 AJAX가 / XHR / 현재 URL을 프로그래밍 방식으로 변경되도록의 현장 탐색 대신 콘텐츠를 동적으로 window.history 실행 API를, 쇼를 추가, 수정하는 패치 사용합니다. 이러한 사이트는 단일 페이지 응용 프로그램에 대한 짧은 SPA이라고합니다.

   많은 사이트는 AJAX가 / XHR / 현재 URL을 프로그래밍 방식으로 변경되도록의 현장 탐색 대신 콘텐츠를 동적으로 window.history 실행 API를, 쇼를 추가, 수정하는 패치 사용합니다. 이러한 사이트는 단일 페이지 응용 프로그램에 대한 짧은 SPA이라고합니다.

   모든 상기 방법은 콘텐츠 스크립트에서 사용할 수 있습니다. 내용 스크립트가 자동으로 URL 만 변경 되었기 때문에 웹 페이지에서 window.history 실행을 통해 프로그램 탐색의 경우 브라우저에 의해 실행되지만 페이지 자체가 같은 (내용 스크립트 페이지 일생에 한 번만 자동으로 실행) 유지되지 않도록주의 .

   이제 배경 스크립트에서의 모습을 보자.

   이 탐색과 작업에 고급 API 있습니다 webNavigation, WebRequest 클래스는,하지만 우리는 콘텐츠 스크립트에 메시지를 보내는 간단한 chrome.tabs.onUpdated 이벤트 리스너를 사용합니다 :

4. ---

   4.당신이 사업부를 변경하는 방법에 따라 또 다른 방법. 당신은 HTML () 메소드 사업부의 내용을 변경 jQuery를 사용하는 경우, 당신은 그 방법을 확장하고 등록 기능 당신이 사업부에 HTML을 넣을 때마다 호출 할 수 있습니다.

   당신이 사업부를 변경하는 방법에 따라 또 다른 방법. 당신은 HTML () 메소드 사업부의 내용을 변경 jQuery를 사용하는 경우, 당신은 그 방법을 확장하고 등록 기능 당신이 사업부에 HTML을 넣을 때마다 호출 할 수 있습니다.

   (function( $, oldHtmlMethod ){
       // Override the core html method in the jQuery object.
       $.fn.html = function(){
           // Execute the original HTML method using the
           // augmented arguments collection.
   
           var results = oldHtmlMethod.apply( this, arguments );
           com.invisibility.elements.findAndRegisterElements(this);
           return results;
   
       };
   })( jQuery, jQuery.fn.html );
   

   우리는 단지) ​​HTML (에 대한 호출을 차단 맥락에서 우리는 원래 jquery.html () 함수에 대한 호출을 전달, 새로운 내용을 얻는 대상 요소를 참조이있는 등록 함수를 호출합니다. JQuery와 메소드 체인을 위해 그것을 기대하기 때문에, 원래의 HTML () 메서드의 결과를 반환해야합니다.

   방법 오버라이드 및 확장에 대한 추가 정보를 원하시면, 어디있는 http://www.bennadel.com/blog/2009-Using-Self-Executing-Function-Arguments-To-Override-Core-jQuery-Methods.htm 체크 아웃 나는 클로저 기능을 cribbed. 또한 jQuery의 사이트에서 플러그인 자습서를 확인하십시오.

5. ---

   5.MutationObserver API에서 제공하는 "원시"도구 외에도, DOM 돌연변이와 작업을 "편리 성"라이브러리가 존재한다.

   MutationObserver API에서 제공하는 "원시"도구 외에도, DOM 돌연변이와 작업을 "편리 성"라이브러리가 존재한다.

   고려 : MutationObserver는 하위 트리의 관점에서 각 DOM 변화를 나타냅니다. 당신은, 예를 들어, 특정 요소에 대한 대기가 삽입하는 경우 그래서, 그것은 mutations.mutation의 아이 [I] .addedNodes [J] 깊숙한 수 있습니다.

   자신의 코드는, 돌연변이에 반응, DOM을 변경하면 또 다른 문제는 - 당신은 종종 그것을 필터링 할.

   좋은 편의 라이브러리로 해결할 수있는 문제와 같은 문제가 돌연변이 요약이다 (면책 조항 : 나는 저자, 그냥 만족 사용자 아니에요) 무엇을있는 거 관심에서의 쿼리를 지정하고 정확하게 얻을 수 있습니다.

   워드 프로세서에서 기본 사용 예 :

   var observer = new MutationSummary({
     callback: updateWidgets,
     queries: [{
       element: '[data-widget]'
     }]
   });
   
   function updateWidgets(summaries) {
     var widgetSummary = summaries[0];
     widgetSummary.added.forEach(buildNewWidget);
     widgetSummary.removed.forEach(cleanupExistingWidget);
   }
   

from https://stackoverflow.com/questions/2844565/is-there-a-javascript-jquery-dom-change-listener by cc-by-sa and MIT license