看DOM的变化，优雅的方式 [英] Watching for DOM changes, the elegant way

问题描述

我需要注意特定DOM元素的任何子项的属性更改。到目前为止，我一直在使用突变事件。

问题是 - 他们是错误的：例如在Chromium下， DOMAttrModified 未被触发，但$ code> 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）{}）
  

解决方案

为了使用jQuery进行高效的DOM监控，您可以查看 jQuery行为插件（免责声明：我是作者），它利用了一个优化版本的实时查询。我在几个产品中使用它3年，没有任何问题。

编辑：侦听属性更改将像这样工作：

  $。behavior（{
'div：first'：{
'changeAttr'：function（event，data）{
 console.log（'Attribute''+ data.attribute +'从+ data.from +更改为'+ data.to +'）; 
} 
 } 
}）; 
 
 $（'div：first'）。attr（'foo'，'bar'）; 
  

I need to watch for an attribute change on any of the children of a specific DOM element. So far, I have been using mutation events.

The problem was - they were buggy: e.g. under Chromium, DOMAttrModified was not fired but DOMSubtreeModified was. The problem was easy to solve: because according to the specification, DOMSubtreeModified is fired if any of the other events is fired, so I just listened to DOMSubtreeModified.

Anyway, Chromium, in the recent versions, stopped firing anything if an attribute has been modified.

The new Mutation Observer API, however, works flawlessly.

Until now, I only need to fire a callback upon ANY change of the subtree of a specific element - simply because nothing else is supposed to change - so I solved my problem by just using mutation events & mutation observer (when available) in the same piece of code.

However, now I need to do more powerful filtering of the events (e.g. on new node, on removed node) - so is there a library, possibly a jQuery plug-in, that would allow me to elegantly use both of these APIs - MutationObserver if available and mutation events as a fallback, with the ability to filter for specific event types (e.g. element added, attribute changed).

E.g.

$("#test").watch({onNewElement: 1}, function(newElement){})
$("#test").watch({onNewAttribute: 1}, function(modifiedElement) {})

Or without jQuery

watchChanges("#test", {onNewElement: 1}, function(newElement){})
watchChanges("#test", {onNewAttribute: 1}, function(modifiedElement){})

解决方案

For efficient DOM monitoring with jQuery, you might take a look at the jQuery Behavior Plugin (Disclaimer: I'm the author) which utilizes a optimized version of Live Query. I'm using it in several products for 3 year now, without any problems.

Edit: Listening for attribute changes would work like this:

$.behavior({
    'div:first': {
        'changeAttr': function (event, data) {
            console.log('Attribute "' +  data.attribute + '" changed from "' + data.from + '" to "' + data.to + '"');
        }
    }
});

$('div:first').attr('foo', 'bar');

这篇关于看DOM的变化，优雅的方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！