Take the 2-minute tour ×

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?

share|improve this question

4 Answers 4

up vote 27 down vote accepted

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.

share|improve this answer
+1 The mutation events plugin is excellent. –  lonesomeday Dec 30 '10 at 10:53
DOM mutation events are actually reasonably well supported among browsers. It's just that IE doesn't support them at all (although IE 9 will). –  Tim Down Dec 30 '10 at 11:50
@TimDown if it comes to IE, it's not a strange thing. –  jmendeth Jun 6 '12 at 12:23
These are now deprecated in favor of MutationObserver, developer.mozilla.org/en-US/docs/Web/API/MutationObserver –  DanielB Jul 22 '13 at 4:21
For me this answer is too succinct. I couldn't find out how to use the plugin for jquery. But the answer of Mats is simple and there's no need for extra plugin. –  Daniel Katz Oct 14 at 8:10

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;
}, 50);

Then bind to the custom "srcChange" event:

$("#myImg").bind("srcChange", function () {....});
share|improve this answer
usage of intervals for this is really poor in my opinion (Yes it is 'a' way). –  EricG Nov 6 '12 at 8:12
The usage of intervals is appropriate in limited quantities especially where performance won't become an issue. I haven't ran any bench tests but I know from experience I can manipulate all kinds of properties in the DOM in a fast interval without noticing performance degradation. –  Xaxis Mar 21 at 17:02

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){
        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]); 
        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;
        if(changed && data.func) {
            data.func.call(el, data);
    } }
share|improve this answer
what about 10ms interval performance with bigger useage? –  Adam Pietrasiak Jul 23 at 9:34

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.

share|improve this answer

Your Answer


