le tir de l'événement sur les DOM la modification de l'attribut

Question

est-il possible de l'événement déclencheur (peut être personnalisé) sur la modification de l'attribut?

Disons que, lorsque IMG src est modifié ou DIV à l'innerHtml?

Answer 1

Vous faites référence à DOM Mutation des Événements. Il est pauvre (mais l'amélioration de la) prise en charge du navigateur pour ces événements. La Mutation des Événements plugin pour jQuery pourrait vous obtenir une partie du chemin.

Answer 2

Comment configurer un MutationObserver, surtout copié à partir de MDN, mais j'ai ajouté mes propres commentaires pour plus de clarté.

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

Espérons que cette aide.

Answer 3

Si vous avez seulement besoin de quelque chose de précis, alors qu'un simple setInterval() de travail, par la vérification de l'attribut cible(s) toutes les quelques millisecondes:

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

Alors se lier à la coutume "srcChange" de l'événement:

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

Answer 4

Il n'y a pas de natifs de dom événement a changé, vous pouvez brancher dans.

Bon article ici qui tente de fournir une solution sous la forme d'un plugin jquery.

Code de l'article

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