为DOM监听

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说，此事件已被弃用，那会我们使用呢？

是否有它substition？
P.S.它只需要在Chrome上工作，因为它是一个Chrome扩展。

Answer 1

如果你看一看：

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

这在铬试验，顺便说一句。

希望帮助...

UPDATE： 或者，你可以在一个函数调用中添加多个事件类型。例如，增加四个事件处理程序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 2

它看起来像它实际上只是在DOM Level 3 Events工作草案，其中规定本说明弃用：

警告！ MutationEvent接口是在DOM Level 2 Events中引入的，但是跨用户代理尚未完全且可互操作地实现 。此外，还有人批评设计中的 接口引入了性能和实施 的挑战。一个新的规范正在开发中，其目标是 解决了突变事件解决的用例，但更多的是以高性能的方式。因此，本规范描述了突变事件 作为参考和遗传行为的完整性，但不赞成使用MutationEvent接口和MutationNameEvent接口。

因此，如果我理解正确，问题的答案是否有替代？是“不，还没有。”

Answer 3

Mutation Event由于性能问题而被弃用。因此，请使用Mutation Observer。我在我的一个项目中使用Mutation Observer完成了DOM更改监听器，它效果很好！为了您的进一步实施，这些链接将帮助您：

1. http://gabrieleromanato.name/jquery-detecting-new-elements-with-the-mutationobserver-object/
2. https://github.com/kapetan/jquery-observe
3. Is there a JavaScript/jQuery DOM change listener?