Chrome扩展程序：创建元素时触发事件？答案

【问题标题】：Chrome Extension: fire an event when element created?Chrome扩展程序：创建元素时触发事件？
【发布时间】：2011-12-19 11:44:34
【问题描述】：

我想在将元素添加到文档时触发一个事件。我已经阅读了JQuery documentation for on() 和list of events，但似乎没有一个事件与元素创建有关。

我必须监控 DOM，因为我无法控制何时将元素添加到文档中（因为我的 Javascript 是 Chrome 扩展内容脚本）

【问题讨论】：

标签： javascript google-chrome-extension

【解决方案1】：

我知道这是一个老问题，已经有了答案，但由于情况发生了变化，我想我应该为登陆此页面寻找答案的人添加一个更新的答案。

DOM Mutation Events 已被弃用。根据 MDN（关于DOM Mutation Events）：

已弃用
此功能已从 Web 中删除。尽管某些浏览器可能仍然支持它，但它正在被删除。不要在旧项目或新项目中使用它。使用它的页面或 Web 应用程序可能随时中断。

应该使用新的MutationObserver API，它也更有效。
（mutation-summary 库现在为这个新 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();

【讨论】：

不，这很好！我讨厌 StackOverflow 与网络技术太过时了。我已将此标记为已接受的答案。

【解决方案2】：

如前所述，我不是在创建自己的元素，因此在创建元素时触发事件不是一种选择。

最好的解决方案是 Mutation Observer API，Mutation Summary 提供了一个友好的接口。

【讨论】：

这对于 Chrome 扩展非常有用。非常感谢！
对于那些想要一些快速代码开始的人：stackoverflow.com/questions/19150450/… 将问题和接受的答案结合起来以获得工作代码。

【解决方案3】：

对于最简单的选项，您可能需要检查LiveQuery，它实际上是您所追求的“DOM 侦听器”。但是应该谨慎使用它，因为它有可能非常重量级，性能方面。

如果您更喜欢“自己动手” - 使用 .on() 它应该适用于所有当前和未来的元素 - 但添加的元素需要与选择器匹配。例如，如果您将一个事件连接到.myClass 的所有类，然后将同一类的新元素注入到 DOM，则该事件应该触发。实际上，.on() API 汇总了先前版本的 jQuery 的绑定/实时/委托，后两者适用于当前和未来的 DOM 元素。

【讨论】：

感谢@SpaceBison。我自己使用 on() 会带来什么？如果有必要，我很乐意使用 livequery，但如果可能的话，我想避免使用插件。
如果您希望在添加项目时触发 自定义事件，请按照 Luiz Fernando 的回答 - 如果您只想使用 内置事件，但是要在创建元素时触发它们，您需要一个选择器来匹配已经存在并将创建的元素，并使用 on() 将它们连接起来- 只要新元素与选择器匹配，任何添加的元素以及预先存在的元素都会触发该事件。

【解决方案4】：

作为@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/

当然，它只有在您创建自己的元素时才有用。

【讨论】：