我需要监视特定DOM元素的任何子元素的属性更改。到目前为止，我一直在使用
mutation events。
问题是 – 他们是buggy：例如。在Chromium下，DOMAttrModified未触发，但DOMSubtreeModified是。问题很容易解决：因为根据规范，DOMSubtreeModified触发任何其他事件被触发，所以我只是听了DOMSubtreeModified。
无论如何，在最近的版本中，如果属性已被修改，Chromium停止发布任何内容。
新的Mutation Observer API，但是，完美地工作。
到现在为止，我只需要发出一个回调任何更改特定元素的子树 – 只是因为没有其他的应该改变 – 所以我解决我的问题，只使用突变事件&突变观察者(如果可用)在同一段代码中。
然而，现在我需要做更强大的事件过滤(例如在新节点，在删除的节点) – 所以有一个库，可能是一个jQuery插件，将允许我优雅地使用这两个API – MutationObserver如果可用，并且突变事件作为后备，具有针对特定事件类型(例如，添加的元素，属性改变)进行过滤的能力。
例如。
$("#test").watch({onNewElement: 1},function(newElement){})
$("#test").watch({onNewAttribute: 1},function(modifiedElement) {})
或者没有jQuery
watchChanges("#test",{onNewElement: 1},function(newElement){})
watchChanges("#test",{onNewAttribute: 1},function(modifiedElement){})
解决方法
这将工作？
http://darcyclarke.me/development/detect-attribute-changes-with-jquery/
$.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);
}
}
}
