[JQUERY] DOM의 속성 변경에 이벤트를 발사

DOM의 속성 변경에 이벤트를 발사

해결법

1. ---

   1.참고 : 2012 년 같이, 돌연변이 이벤트는 표준에서 제거 된 지금은 사용되지 않습니다. 자신의 교체, MutationObserver를 사용하는 방법에 대한 다른 답변이나 설명서를 참조하십시오.

   참고 : 2012 년 같이, 돌연변이 이벤트는 표준에서 제거 된 지금은 사용되지 않습니다. 자신의 교체, MutationObserver를 사용하는 방법에 대한 다른 답변이나 설명서를 참조하십시오.

   당신은 DOM 돌연변이 이벤트를 참조한다. 이 이벤트에 대한 나쁨 (하지만 개선) 브라우저 지원이있다. jQuery를위한 플러그인 돌연변이 이벤트는 당신에게 몇 가지 방법을 얻을 수 있습니다.

2. ---

   2.설정에 MutationObserver은 대부분 MDN에서 복사 그러나 나는 명확성을 위해 내 자신의 의견을 추가 한 방법.

   설정에 MutationObserver은 대부분 MDN에서 복사 그러나 나는 명확성을 위해 내 자신의 의견을 추가 한 방법.

   window.MutationObserver = window.MutationObserver
       || window.WebKitMutationObserver
       || window.MozMutationObserver;
   // Find the element that you want to "watch"
   var target = document.querySelector('img'),
   // create an observer instance
   observer = new MutationObserver(function(mutation) {
        /** this is the callback where you
            do what you need to do.
            The argument is an array of MutationRecords where the affected attribute is
            named "attributeName". There is a few other properties in a record
            but I'll let you work it out yourself.
         **/
   }),
   // configuration of the observer:
   config = {
       attributes: true // this is to watch for attribute changes.
   };
   // pass in the element you wanna watch as well as the options
   observer.observe(target, config);
   // later, you can stop observing
   // observer.disconnect();
   

   도움이 되었기를 바랍니다.

3. ---

   3.당신은 뭔가 특별한 필요하면 다음 간단한의에서는 setInterval ()는 대상의 속성을 (들)마다 몇 밀리 초 확인하여 작동합니다 :

   당신은 뭔가 특별한 필요하면 다음 간단한의에서는 setInterval ()는 대상의 속성을 (들)마다 몇 밀리 초 확인하여 작동합니다 :

   var imgSrc = null;
   setInterval(function () {
      var newImgSrc = $("#myImg").attr("src");
      if (newImgSrc !== imgSrc) {
         imgSrc = newImgSrc;
         $("#myImg").trigger("srcChange");
      }
   }, 50);
   

   그런 다음 사용자 정의 "srcChange"이벤트에 바인딩 :

   $("#myImg").bind("srcChange", function () {....});
   

4. ---

   4.당신이에 연결할 수 네이티브 DOM 변경 이벤트가 없습니다.

   당신이에 연결할 수 네이티브 DOM 변경 이벤트가 없습니다.

   JQuery와 플러그인의 형태로 솔루션을 제공하려고 여기 좋은 기사.

   기사 코드

   $.fn.watch = function(props, callback, timeout){
       if(!timeout)
           timeout = 10;
       return this.each(function(){
           var el      = $(this),
               func    = function(){ __check.call(this, el) },
               data    = { props:  props.split(","),
                           func:   callback,
                           vals:   [] };
           $.each(data.props, function(i) {
                 data.vals[i] = el.css(data.props[i]); 
           });
           el.data(data);
           if (typeof (this.onpropertychange) == "object"){
               el.bind("propertychange", callback);
           } else if ($.browser.mozilla){
               el.bind("DOMAttrModified", callback);
           } else {
               setInterval(func, timeout);
           }
       });
       function __check(el) {
           var data    = el.data(),
               changed = false,
               temp    = "";
           for(var i=0;i < data.props.length; i++) {
               temp = el.css(data.props[i]);
               if(data.vals[i] != temp){
                   data.vals[i] = temp;
                   changed = true;
                   break;
               }
           }
           if(changed && data.func) {
               data.func.call(el, data);
           }
       } }
   

5. ---

   5.매트 '대답 외에도 MDN의 MutationObserver 사용 예제에서 영감 :

   매트 '대답 외에도 MDN의 MutationObserver 사용 예제에서 영감 :

   사실 당신은 재귀 호출을 방지하기 위해 다음과 같은 사용 MutationObserver의 콜백 함수 내에서 대상의 속성을 변경할 계획 - 스크립트 시간 제한, 스택 오버 플로우 나 같은 때까지 옵션은 <부동산> 포함되어있는 경우 :

   ...
   // Used to prevent recursive calls of observer's callback function
   // From https://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change
   let insideInitialObserverCallback = false
   
   let callback = function(mutationsList) {
       insideInitialObserverCallback = ! insideInitialObserverCallback
       if ( insideInitialObserverCallback ) {
   
           // ... change target's given property ...       
   
       }
   })
   
   let observer = new MutationObserver(callback);
   ...
   

6. ---

   6.나는 어떤 특정 DOM 요소의 트랙 속성 변경을 찾아야했다 동일한 문제가 있었다. 나는 MutationObserver을 사용했다.

   나는 어떤 특정 DOM 요소의 트랙 속성 변경을 찾아야했다 동일한 문제가 있었다. 나는 MutationObserver을 사용했다.

   그러나 MutationObserver를 사용하는 동안 내가 직면하고 있었는지 한 번 더 합병증이 있었다. 변화를 관찰하면서 MutationObserver 어떤 대상 요소를 필요로한다.

   (사용 된 AJAX가, 각도가, 반응 또는 다른 자바 스크립트 프레임 워크) SPA와 함께 작업하는 동안, 당신은 모든 요소가 동적 실현 있습니다. 사용자들은이 설정 대상 어렵다.

   여기에 내가 DOM에 MutationObserver을 적용하고 모든 요소의 일부 속성이 변화를 얻을 때 맞춤 이벤트를 방출 한 몇 가지 솔루션을했다.

   다음 우리의 요구 사항에 따라 다음 단계 필터 사용자 정의 이벤트입니다.

   // 각 1000MS의 변화 이미지 src에 코드입니다. 카운트 = 0; 하여 setInterval (함수 () { 치수 = '$ {600} + 카운트 $ {400} + 카운트를'X; document.querySelector ( 'div.image 박스 IMG') SRC = 'https://dummyimage.com/$ 치수 {} / 000 / fff`.; document.querySelector ( 'div.image 박스 IMG') = ALT 차원.; ++ 계산; } 1000); 함수 startMutationObserver (TNODE, c) { 돌연변이 관찰 될 노드를 선택합니다 // const를 targetNode = TNODE? TNODE : 문서; (관찰 돌연변이) 관찰자에 대한 // 옵션 const를 설정 = C? 씨 : { 속성 : 사실, childList : 사실, 하위 트리 : 사실 }; 돌연변이가 관찰 할 때 실행할 // 콜백 함수 CONST = 콜백 함수 (mutationsList, 관찰자) { 에 대한 {(mutationsList의 돌연변이를하자) 경우 (mutation.type === 'childList') { targetNode.dispatchEvent (새 맞춤 이벤트 ( '를 newChild', { 세부 : 돌연변이 })); } 다른 경우 (mutation.type === '속성') { targetNode.dispatchEvent (새 맞춤 이벤트 ( 'attributeChange', { 세부 : 돌연변이 })); } } }; 콜백 함수에 연결 관찰자의 인스턴스를 생성 // CONST 관찰자 새로운 MutationObserver (콜백) =; // 시작 구성 돌연변이의 대상 노드를 관찰 observer.observe (targetNode, 구성); // 나중에 관찰 중지 할 수 있습니다 // observer.disconnect (); } // DOM 요소의 변화를 관찰 시작하려면이 함수를 호출 startMutationObserver (문서); // 코드는 요구 사항에 따라 사용자 정의 이벤트 및 필터 사용자 정의 이벤트를들을 수 있습니다 document.addEventListener ( 'attributeChange', 기능 (E) { // CONSOLE.LOG (E); CONST ELE = e.detail; 경우 (ele.target.matches ( 'div.image 박스 IMG') && ele.attributeName == 'SRC') { VAR SRC = e.detail.target.getAttribute ( 'SRC'); VAR e.detail.target.getAttribute ALT = ( 'ALT'); CONSOLE.LOG (SRC, 고도); } }) <메타 캐릭터 = "UTF-8"> <메타 이름 = "뷰포트"내용 = "= 폭 소자 폭 초기 스케일 = 1.0">