DOMの変更を監視する、エレガントな方法

Question

特定のDOM要素の子のいずれかで属性の変更を監視する必要があります。今のところ、私はmutation eventsを使っています。

問題は - バグだった。クロムの下でDOMAttrModifiedは発射されなかったが、DOMSubtreeModifiedはあった。問題は簡単に解決できました。他のイベントが発生した場合はDOMSubtreeModifiedが発生するため、DOMSubtreeModifiedを聞いただけです。

とにかく、最近のバージョンでは、属性が変更された場合、Chromiumは何も実行を停止しました。

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

これまでは、特定の要素のサブツリーを変更したときにコールバックを行うだけで済みました。他のものは変更されていないため、私は突然変異イベントを使用して問題を解決しました。& ）を同じコードで使用します。

しかし、今私は（削除したノード上の例えば新しいノード上で、）イベントのより強力なフィルタリングを行う必要がある - そうはエレガントな使用に私をできるようになること、おそらくjQueryのプラグイン、ライブラリがありますこれらのAPIのと利用可能な場合は、変異イベントをフォールバックとして特定のイベントタイプをフィルタリングする機能（たとえば、要素の追加、属性の変更など）。

など。

$("#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){}) 

Answer 1

この作品は、でしょうか？ jQueryを使って効率的なDOMの監視のために

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); 
     } 
    } 
} 

Answer 2

、あなたはjQuery Behavior Plugin（免責事項：私は著者です）を見かかることがありますLive Queryの最適化されたバージョンを利用しています。私は何年も何年も問題なく、いくつかの製品に使っています。

編集：属性の変更のためのリスニングは次のように動作します：いくつかはこれを見つけたサーチし

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

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