爲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?