Pouvez-vous avoir un javascript crochet de déclenchement après un élément du DOM du style de l'objet de modifications?

Edit 4: Démonstration En Direct

JS:

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

CSS:

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;
}

HTML:

<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: j'ai mis tout cela ensemble comme un plugin qui peut être téléchargé à partir de git attrchange et voici le page.

Edit 2:

1. Correctif pour propertName dans IE7 & IE8

Edit 1:

1. Gérer plusieurs éléments
2. Commandé les conditions MutationObserver, DOMAttrModified et onpropertychange pour une meilleure mise en œuvre.
3. Modifié ajouté le Nom de l'Attribut à la fonction de rappel.

Grâce à @benvie pour ses commentaires.

DÉMO: http://jsfiddle.net/zFVyv/10/ (Testé dans FF 12, Chrome 19 et 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. Détecter si DOMAttrModified pris en charge
2. DOMAttrModified pour chrome
3. La Mutation De L'Observateur
4. Pourquoi devrions-nous éviter d'utiliser la Mutation des événements?
5. onPropertyChange IE

Mutation des Observateurs est le projet de remplacement de la mutation des événements dans DOM4. Ils devraient être inclus dans Firefox 14 et Chrome 18

Prise En Charge Du Navigateur:

onpropertychange - est pris en charge dans IE (testé sous IE 7)

DOMAttrModified - est pris en charge dans IE 9, FF et Opera

MutationObservers - est très nouveau et il a bien fonctionné dans Chrome 18. Pas certain dans quelle mesure il est pris en charge et encore être testée dans Safari.

Grâce @benvie sur l'ajout d'infos sur WebkitMutationObserver

J'ai trouvé ce petit plugin qui fait exactement cela et il peut être modifié pour ajouter de la mutation que vous souhaitez... Même scrollHeight changement écouteur.

Le plugin: http://www.jqui.net/jquery-projects/jquery-mutate-official/

voici la démo:
http://www.jqui.net/demo/mutate/

Dans une réponse à une question similaire, il a été suggéré que si vous savez ce style d'établissement des interactions serait effectuée via une interface standard (c'est à dire toujours à l'aide de jQuery, etc.) il a été suggéré que les événements personnalisés être déclenché à chaque fois que la bibliothèque de la méthode est appelée.

Cela permettrait un plus large soutien de la matrice, mais laisserait tout changement de propriété ignorée si elle est effectuée sans l'aide de la méthode de bibliothèque. Il apparaît également qu'une telle approche n'est pas applicable à natif setters ils ne peuvent pas toujours être invoqué.