Chrome擴展程序：元素創建時觸發事件嗎？

我想在元素添加到文檔時觸發事件。我已閱讀JQuery documentation for on()和list of events，但沒有一個事件似乎涉及元素創建。Chrome擴展程序：元素創建時觸發事件嗎？

我必須監控DOM，因爲我當元素被添加到文檔（如我的JavaScript是一款Chrome擴展內容腳本）

來源

2011-12-19 mikemaccana

我知道這是一個老問題，已經有一個答案，但因爲事情已經改變了，我想我會添加一個更新的答案的人登陸此頁面尋找答案的。

DOM Mutation Events已被棄用。根據MDN（關於DOM Mutation Events）：

棄用
此功能已經從網絡中移除。儘管一些瀏覽器可能仍然支持它，但它正在被丟棄。不要在舊項目或新項目中使用它。使用它的頁面或Web應用程序可能會隨時中斷。

每個人都應該使用新的MutationObserver API，這也更有效率。
（該mutation-summary庫現在提供了一種有用inteface到這個新的API。）

實例：

/* Create an observer instance */ 
var observer = new MutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     console.log(mutation.type); 
    }); 
}); 

/* Config info for the observer */ 
var config = { 
    "childList": true, 
    "subtree": true 
}; 

/* Observe the body and its (descendants) for "childList" changes */ 
observer.observe(document.body, config); 

/* Stop the observer, when it is not required any more */ 
observer.disconnect();

來源

2013-11-04 11:51:38 gkalpak

不，這很好！我討厭StackOverflow和Web技術過時了。我已將此標記爲接受的答案。 – mikemaccana 2013-11-04 12:04:17

對於最簡單的選項不用管，你可能要檢查LiveQuery這實際上是你所追求的'DOM監聽者'。但是，它應該謹慎使用，因爲它具有相當重量級的性能。

如果您更喜歡'滾動自己' - 與.on（）它應該適用於所有當前和未來的元素 - 但添加的元素將需要匹配選擇器。例如，如果您將事件連接到所有類.myClass，然後您將相同類的新元素注入DOM，則該事件應該會觸發。 .on（）API有效地從jQuery的早期版本中綁定/活動/委託，後兩種對現有和將來的DOM元素都起作用。

來源

2011-12-19 11:52:18 SpaceBison

由於@SpaceBison。（）中使用我自己使用的東西會帶來什麼？如果有必要，我很樂意使用livequery，但如果可能的話，我想避免使用插件。 – mikemaccana 2011-12-19 12:14:45

如果你想在添加一個項目時觸發*自定義事件*，請按照Luiz Fernando的回答 - 如果你只想使用*內置事件*，但在元素創建時讓它們觸發，將需要一個選擇器來匹配已經存在和將要創建的元素，並且使用* on（）*將它們連接起來 - 只要新元素與選擇器匹配，事件將觸發任何添加的元素以及pre -現有。 – SpaceBison 2011-12-20 09:10:17

正如@ SpaceBison的回答的補充，當你創建這些元素，你可以創建自己的事件。例如：

function create_element() { 
    // Create an element 
    $('body').append("<p>Testing..</p>") 
    // Trigger 
    $('body').trigger('elementCreated'); 
} 
function monitor_elements() { 
    $("body").on("elementCreated", function(event){ 
    alert('One more'); 
    }); 
} 

$(document).ready(function(){ 

    monitor_elements(); 

    for (var i=0; i < 3; i++) { 
     create_element(); 
    } 

});

活生生的例子：http://jsfiddle.net/9NsAh/

但當然，只有當你創建你自己的元素有用。

來源

2011-12-19 12:08:32

如前所述，我沒有創造我自己的元素，所以發射了一個事件，當我創建的元素是不是一種選擇。

對此的最佳解決方案是突變觀察者 API，其中Mutation Summary提供了一個友好的界面。

來源

2012-12-03 11:28:36 mikemaccana

這對於Chrome擴展程序非常有用。非常感謝！ – 2013-11-01 19:47:57

對於那些想要一些快速代碼去的人：http://stackoverflow.com/questions/19150450/why-dont-mutationobserver-codes-run-on-chrome-30 **結合問題和工作代碼接受的答案** – 2013-11-01 20:05:54