首页 文章

看着DOM的变化，优雅的方式

提问于
浏览 次
38

我需要注意特定DOM元素的任何子元素的属性更改 . 到目前为止，我一直在使用mutation events .

问题是 - 他们是越野车：例如在Chromium下， DOMAttrModified 没有被解雇，但 DOMSubtreeModified 是 . 问题很容易解决：因为根据规范，如果触发了任何其他事件，则会触发 DOMSubtreeModified ，所以我只是听了 DOMSubtreeModified .

无论如何，在最近的版本中，如果属性被修改，Chromium会停止触发任何内容 .

然而，新的Mutation Observer API完美无瑕 .

到目前为止，我只需要在任何特定元素的子树更改时触发回调 - 只是因为没有别的东西可以改变 - 所以我通过使用突变事件和变异观察器（如果可用）来解决我的问题一段代码 .

但是，现在我需要对事件进行更强大的过滤（例如，在新节点上，在删除的节点上） - 所以有 a library, possibly a jQuery plug-in ，这将允许我优雅地使用这些API的 both - 如果可用的话 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 html html5 dom

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);
        }
    }
}
    回复于
  • 2

    对于使用jQuery进行高效的DOM监控，您可以查看jQuery Behavior Plugin（免责声明：我是作者），它使用Live Query的优化版本 . 我现在在几种产品中使用它已经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');
    回复于

相关问题