注意DOM的变化，优雅的方式
我需要注意特定DOM元素的任何子元素的属性更改。 到目前为止，我一直在使用突变事件 。
问题是 – 他们是越野车：例如在铬， DOMAttrModified没有被解雇，但DOMSubtreeModified是。 这个问题很容易解决：因为根据规范，如果任何其他事件被触发， DOMSubtreeModified被触发，所以我只是听取了DOMSubtreeModified 。
无论如何，在最近的版本中，如果一个属性被修改，Chromium会停止发射任何东西。
然而，新的Mutation Observer API完美地工作。
到目前为止，我只需要对某个特定元素的子树进行任何修改就发起一个callback – 仅仅因为没有别的东西会被改变 – 所以我通过使用突变事件和变异观察者（当可用时）来解决我的问题一段代码。
然而，现在我需要对事件进行更强大的过滤（例如，在新节点上，在已删除的节点上） – 那么是否有一个库，可能是一个jQuery插件 ，这将允许我优雅地使用这两个 API – MutationObserver如果可用，则将突变事件作为回退，并具有针对特定事件types（例如添加的元素，属性更改）进行筛选的function。
例如
$("#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); } } }
为了使用jQuery进行高效的DOM监控，您可以查看使用Live Query优化版本的jQuery Behavior Plugin （免责声明：我是作者）。 我在几年的产品中使用了3年，没有任何问题。
编辑：倾听属性更改会像这样工作：
$.behavior({ 'div:first': { 'changeAttr': function (event, data) { console.log('Attribute "' + data.attribute + '" changed from "' + data.from + '" to "' + data.to + '"'); } } }); $('div:first').attr('foo', 'bar');
