2

私はDOMリスナーがないと思っていたので、独自の「重い」リスナーを実装しました：

function CvHelper(stackApi) {
  var that = this;

  // check if room is finished loading
  this.init = function() {
    if ($('#loading').length) {
      setTimeout(that.init, 1000);
    } else {
      console.log('Chatroom finished loading');

      that.postListener();
    }
  }
}

(function() {
  var stackApi = new StackApi();
  var cvHelper = new CvHelper(stackApi);
  cvHelper.init();
})();

これはただひどいと思います。だから私はここでSOを検索したところ、この質問がポップアップしました。ただし、受け入れられた質問に関する最後のコメントは、それが非推奨であると述べています。

$("#someDiv").bind("DOMSubtreeModified", function() {
  alert("tree changed");
});

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModifiedは、このイベントは非推奨であると言っていますが、代わりに何を使用しますか?

それに代わるものはありますか？
PS Chrome 拡張機能であるため、Chrome でのみ動作する必要があります。

4

3 に答える 3

2

あなたが見てみると：

http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MutationEvent

DOMSubtreeModified に関して、「ドキュメントが 1 回変更された後に発生するか、実装の裁量で複数の変更が発生した後に発生する可能性がある」と述べています。

したがって、DOMNodeInserted などの別の MutationEvent を使用すると、より決定論的なイベントの発生が得られる可能性があります (その特定のケースでは、ノードに要素を追加するだけで済みます)。

下記参照：

$('body').prepend( $('<div id="cow">Hello</div>') );

$('#cow').bind("DOMNodeInserted",function(){ alert('hi'); } );

$('#cow').prepend( $("<div></div>") );

これはChromeでテストされました。

それが役立つことを願っています...

更新: または、1 回の関数呼び出しで複数のイベント タイプを追加することもできます。たとえば、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified の 4 つのイベント ハンドラーを追加すると、すべてのハンドラーが 1 つのハンドラーを呼び出します。

更新: 前回の更新で書いたことを実行する小さなスクリプトを書きました。

$('body').prepend( $('<div id="cow">Hello</div>') );

/**
* This function registers event handlers which invoke the mutateHandler 
* handler when any of the MutationEvents are fired on a node: DOMNodeInserted, 
* DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified.
*
*/
var onMutate = function( mutateHandler ){

    var that = this;
    $(this).bind( "DOMNodeInserted", function( event ){ 
        mutateHandler.call( that, event ); 
    });
    $(this).bind( "DOMNodeRemoved", function( event ){ 
        mutateHandler.call( that, event ); 
    });
    $(this).bind( "DOMAttrModified", function( event ){ 
        mutateHandler.call( that, event );
    });
    $(this).bind( "DOMCharacterDataModified", function( event ){ 
        mutateHandler.call( that, event );
    });

};

onMutate.call( $('#cow')[0], function(){
    alert( $(this).attr('id') );
});


$('#cow').prepend( $("<div></div>") );
$('#cow').addClass( 'my_class' );
于 2012-03-06T17:58:35.013 に答える