39

特定の DOM 要素の子の属性の変更を監視する必要があります。これまで、ミューテーション イベントを使用してきました。

問題は、バグが多かったことです。たとえば、Chromium では、DOMAttrModified起動されませんでしたが、起動DOMSubtreeModifiedされました。この問題は簡単に解決できました。仕様によるとDOMSubtreeModified、他のイベントのいずれかが発生した場合に が発生するため、DOMSubtreeModified.

とにかく、最近のバージョンの Chromium では、属性が変更された場合、何も起動しなくなりました。

ただし、新しいMutation Observer APIは問題なく動作します。

これまでは、特定の要素のサブツリーが変更されたときにコールバックを起動するだけで済みました。これは、他に何も変更する必要がないためです。そのため、突然変異イベントと突然変異オブザーバー (利用可能な場合) を同じで使用するだけで問題を解決しました。コードの一部。

ただし、イベントのより強力なフィルタリングを行う必要があります (たとえば、新しいノード、削除されたノードなど) -これらの API の両方をエレガントに使用できるようにするライブラリ (おそらく jQuery プラグイン) がありますか?特定のイベント タイプ (要素の追加、属性の変更など) をフィルタリングする機能を備えた、フォールバックとしての利用可能および突然変異イベント。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 に答える