DOM 속성 변경시 이벤트 발생

DOM 속성 변경시 이벤트 발생

---

속성 변경시 이벤트 (사용자 정의 가능)를 트리거하는 방법이 있습니까?

IMG src가 변경되거나 DIV의 innerHtml이 변경되면?

---

참고 : 2012 년부터 Mutation Events는 표준에서 제거되었으며 이제 더 이상 사용되지 않습니다. 대체 사용 방법은 다른 답변이나 설명서를 참조하십시오 MutationObserver.

DOM Mutation Events를 참조하고 있습니다. 이러한 이벤트에 대한 브라우저 지원이 좋지는 않지만 개선되고 있습니다. jQuery 용 Mutation Events 플러그인이 도움 이 될 수 있습니다.

---

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();

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

---

특정 항목 만 필요한 경우 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 () {....});

---

연결할 수있는 네이티브 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);
        }
    } }

---

MDN의 MutationObserver 예제 사용법에서 영감을 얻은 Mats의 답변 외에도 :

귀하의 경우 옵션을 포함 <property>: true하고의이 속성을 변경할 계획 대상 내부 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);
...

참고URL : https://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change