डीओएम विशेषता परिवर्तन पर फायरिंग घटना

Question

विशेषता परिवर्तन पर ईवेंट ट्रिगर करने के लिए कोई तरीका है (कस्टम हो सकता है)?

मान लें, जब IMG src बदल जाता है या DIV का आंतरिक HTML?

Answer 1

नोट: 2012 तक, उत्परिवर्तन घटनाओं को मानक से हटा दिया गया है और अब उन्हें बहिष्कृत कर दिया गया है। उनके प्रतिस्थापन, MutationObserver का उपयोग करने के तरीके के लिए अन्य उत्तरों या दस्तावेज़ीकरण देखें।

आप DOM Mutation Events का जिक्र कर रहे हैं। इन घटनाओं के लिए ब्राउज़र समर्थन खराब है (लेकिन सुधार)। Mutation Events plugin for jQuery आपको कुछ रास्ता मिल सकता है।

Answer 2

कोई देशी डोम बदल गया ईवेंट नहीं है जिसमें आप हुक कर सकते हैं।

अच्छा लेख here जो एक 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); 
     } 
    } } 

Answer 3

से

कोड तो एक सरल 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() {....}); 

Answer 4

एक उत्परिवर्तन ऑब्सर्वर कैसे सेट करें, अधिकतर 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(); 

उम्मीद है कि इससे मदद मिलती है।

Answer 5

Mats' answerMDN's MutationObserver Example usage से प्रेरित करने के अलावा:

यदि आपका विकल्पों<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); 
...