Question

我原以为没有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并this question弹出。但是last comment on the accepted question表示不推荐使用它。

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

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

是否有替代品？附：它只需要在Chrome上运行，因为它是Chrome扩展程序。

Answer 1

Mutation Event目前已被弃用，因为它存在性能问题。因此，请使用Mutation Observer。我使用Mutation Observer在我的一个项目中做了DOM更改监听器，它运行得很好！为了进一步实施，这些链接将为您提供帮助：

Answer 2

如果你看看：

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

它指出，对于DOMSubtreeModified，“可能会在对文档进行一次修改后，或者在执行多次更改后由执行人员自行决定时触发。”

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

见下文：

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

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

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

这是在Chrome，btw。

中测试的

希望有帮助...

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

更新：我写了一个小脚本，它完成了我刚刚在上一次更新中写的内容：

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

Answer 3

看起来它实际上只是在DOM Level 3 Events的工作草案中弃用了，它提供了这个注释：

警告！ MutationEvent接口是在DOM Level 2中引入的事件，但尚未完全和互操作地实施跨用户代理。此外，还有批评说界面，如设计，介绍了性能和实现挑战。目前正在制定新的规范解决突变事件解决的用例，但更多高效的方式。因此，该说明书描述了突变事件作为遗留行为的参考和完整性，但弃用了使用MutationEvent接口和MutationNameEvent 接口

所以，如果我理解正确，那么问题的答案是“还有替代吗？”是“不，还没有。”

DOM侦听器的实现

3 个答案: