39

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

问题是——它们有问题:例如在 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){})
4

2 回答 2

2

这行得通吗?

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);
        }
    }
}
于 2012-07-21T23:48:43.853 回答
2

为了使用 jQuery 进行有效的 DOM 监控,您可以查看使用Live Query优化版本的jQuery Behavior Plugin(免责声明:我是作者)。我在几个产品中使用了 3 年,没有任何问题。

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');
于 2013-12-16T12:09:49.460 回答