Czy po zmianie obiektu stylu elementu DOM można uruchomić hak javascript?

Edit 4: Live Demo

$(function() {
  $('#toggleColor').on('click', function() {
    $(this).toggleClass('darkblue');
  }).attrchange({
    trackValues: true,
    callback: function(event) {
      $(this).html("<ul><li><span>Attribute Name: </span>" + event.attributeName + "</li><li><span>Old Value: </span>" + event.oldValue + "</li><li><span>New Value: </span>" + event.newValue + "</li></ul>");
    }
  });
});

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
}
#toggleColor {
  height: 70px;
  width: 300px;
  padding: 5px;
  border: 1px solid #c2c2c2;
  background-color: #DBEAF9;
}
#toggleColor span {
  font-weight: bold;
}
#toggleColor.darkblue {
  background-color: #1A9ADA;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://meetselva.github.io/attrchange/javascripts/attrchange.js"></script>
<p>Click below div to toggle class darkblue.</p>
<div id="toggleColor"></div>

Edit 3: umieściłem to wszystko razem jako plugin, który można pobrać z git attrchange A oto strona demo.

Edytuj 2:

1. poprawka dla nazwy właściwości w IE7 i IE8

Edytuj 1:

1. Obsługa wielu elementów
2. uporządkował Warunki jako MutationObserver, DOMAttrModified i onpropertychange dla lepszej implementacji.
3. Dodano zmodyfikowaną nazwę atrybutu do wywołania zwrotnego.

Dzięki @ benvie za jego opinię.

DEMO: http://jsfiddle.net/zFVyv/10 / (testowane w FF 12, Chrome 19 i IE 7.)

$(function() {
    (function($) {
        var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

        function isDOMAttrModifiedSupported() {
            var p = document.createElement('p');
            var flag = false;

            if (p.addEventListener) p.addEventListener('DOMAttrModified', function() {
                flag = true
            }, false);
            else if (p.attachEvent) p.attachEvent('onDOMAttrModified', function() {
                flag = true
            });
            else return false;

            p.setAttribute('id', 'target');

            return flag;
        }

        $.fn.attrchange = function(callback) {
            if (MutationObserver) {
                var options = {
                    subtree: false,
                    attributes: true
                };

                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(e) {
                        callback.call(e.target, e.attributeName);
                    });
                });

                return this.each(function() {
                    observer.observe(this, options);
                });

            } else if (isDOMAttrModifiedSupported()) {
                return this.on('DOMAttrModified', function(e) {
                    callback.call(this, e.attrName);
                });
            } else if ('onpropertychange' in document.body) {
                return this.on('propertychange', function(e) {
                    callback.call(this, window.event.propertyName);
                });
            }
        }
    })(jQuery);

    $('.test').attrchange(function(attrName) {
        alert('Attribute: ' + attrName + ' modified ');
    }).css('height', 100);

});

Ref:

1. Detect if domattrmodified supported
2. DOMAttrModified for chrome
3. mutacja Obserwator
4. Dlaczego powinniśmy unikać przypadków mutacji?
5. onPropertyChange IE

Obserwatorzy mutacji jest proponowanym zamiennikiem zdarzeń mutacyjnych w DOM4. Oczekuje się, że będą one zawarte w Firefox 14 i Chrome 18

Obsługa Przeglądarki:

onpropertychange - jest obsługiwany w IE (testowany w IE 7)

DOMAttrModified - jest obsługiwany w IE 9, FF i operze

MutationObservers - jest bardzo nowy i działa fine in Chrome 18 . Nie wiem, jak daleko jest obsługiwany i jeszcze do przetestowania w Safari.

Thanks @benvie on adding info about WebkitMutationObserver