Vuurgebeurtenis bij wijziging van DOM-kenmerk

Is er een manier om een ​​gebeurtenis te activeren (mogelijk aangepast) bij kenmerkwijziging?

Laten we zeggen, wanneer IMG src wordt gewijzigd of de innerHtml van DIV?

Antwoord 1, autoriteit 100%

Opmerking: met ingang van 2012 zijn mutatiegebeurtenissen uit de standaard verwijderd en zijn ze nu verouderd. Zie andere antwoorden of documentatie voor het gebruik van hun vervanging, MutationObserver.

Je verwijst naar DOM-mutatie Evenementen. Er is slechte (maar verbeterende) browserondersteuning voor deze gebeurtenissen. Mutation Events-plug-in voor jQuerykan je misschien op weg helpen.

Antwoord 2, autoriteit 81%

Hoe een MutationObserver in te stellen, meestal gekopieerd van MDNmaar ik heb mijn eigen opmerkingen toegevoegd voor de duidelijkheid.

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

Hopelijk helpt dit.

Antwoord 3, autoriteit 12%

Als je alleen iets specifieks nodig hebt, dan werkt een eenvoudige setInterval(), door de doelattributen om de paar milliseconden te controleren:

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

Verbind vervolgens met de aangepaste “srcChange”-gebeurtenis:

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

Antwoord 4, autoriteit 8%

Er is geen native dom gewijzigd evenement waar je aan kunt haken.

Goed artikel hierdat probeert een oplossing te bieden in de vorm van een jQuery-plug-in.

Code uit artikel

$.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);
        }
    } }

Antwoord 5

In aanvulling op Mats’ antwoordgeïnspireerd door MDN’s MutationObserver Voorbeeldgebruik:

Als uw opties<property>: truebevatten en u van plan bent deze eigenschap van targette wijzigen in MutationObserver‘s callback-functie, gebruik het volgende om recursieve aanroepen te voorkomen – tot scripttime-out, stack-overflow of iets dergelijks:

...
// 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);
...