实现DOM监听器 [英] Implementation of a DOM listener

问题描述

我以为没有DOM监听器，所以我实现了我自己的重监听器：

I was thinking there was no DOM listener so I implemented my own 'heavy' listener:

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，并且这个问题弹出。但是，接受问题的最新评论表示它已被弃用。

I think this just sucks. So I did a search on here on SO and this question popped up. However the last comment on the accepted question states that it is deprecated.

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

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified 说这个事件已被弃用，我们会用什么？

w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified says this event is deprecated, what would we use instead?

是否有替代品？

PS它只能在Chrome上工作，因为它是一个Chrome扩展。

Is there a substition for it?
P.S. It only has to work on Chrome, because it is an Chrome extension.

推荐答案

如果你看看：

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

它声明，关于DOMSubtreeModified，可能会在对文档进行单一修改后被解雇，或者在执行多次更改之后执行。

It states that, regarding DOMSubtreeModified, "It may be fired after a single modification to the document or, at the implementation's discretion, after multiple changes have occurred."

因此，如果您使用一个不同的MutationEvent，说DOMNodeInserted，你可能会得到一个更确定的触发事件（你只需要在特定情况下添加一个元素到节点）。

Therefore, if you use a different MutationEvent, say DOMNodeInserted, you may get a more deterministic firing of events (You'd just have to add an element to the node in that specific case).

参见下文：

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

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

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

这是在Chrome，btw中测试。

This was tested in Chrome, btw.

希望有帮助...

更新：
或者，您可以在一个函数调用中添加多个事件类型。例如，为DOMNodeInserted，DOMNodeRemoved，DOMAttrModified，DOMCharacterDataModified添加四个事件处理程序，然后所有处理程序调用单个处理程序。

UPDATE: Alternatively, you could add more than one event type in one function call. For example, adding four event handlers for DOMNodeInserted, DOMNodeRemoved, DOMAttrModified, DOMCharacterDataModified, then all of the handlers call a single handler.

更新：我写了一个脚本我刚才在以前的更新中写过：

UPDATE: I wrote a little script that does what I had just written in the previous update:

$('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' );

这篇关于实现DOM监听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！