Firing event on DOM attribute change

Question

Is there any way to trigger event (may be custom) on attribute change?

Let's say, when IMG src is changed or DIV's innerHtml?

Answer 1

Note: As of 2012, Mutation Events have been removed from the standard and are now deprecated. See other answers or documentation for how to use their replacement, MutationObserver.

You are referring to DOM Mutation Events. There is poor (but improving) browser support for these events. Mutation Events plugin for jQuery might get you some of the way.

Answer 2

How to setup a MutationObserver, mostly copied from MDN but I've added my own comments for clarity.

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

Hope this helps.

Answer 3

If you only need something specific then a simple setInterval() will work, by checking the target attribute(s) every few milliseconds:

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

Then bind to the custom "srcChange" event:

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

Answer 4

There is no native dom changed event you can hook into.

Good article here which tries to provide a solution in the form of a jquery plugin.

Code from 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);
        }
    } }