在添加到 DOM 时触发 Javascript 事件

Question

有谁知道在将元素添加到 DOM 后如何在 Javascript 中触发事件？

大致思路是这样的：

var elem = document.createElement('div');
elem.addEventListener('ON_ADD_TO_BODY', function(){console.log(elem.parentNode)});
//... LATER ON ...
parentElemInBody.appendChild(elem); // <- Event is triggered here after append

在将元素添加到 DOM 之前不应触发某些函数，因此在添加元素之前延迟执行是有意义的。

有没有一种方法可以做到这一点，而无需稍后明确调用它们，或者我应该做一些包含setTimeout 和检查元素是否已添加到 DOM 的 hack？

Answer 1

使用 DOMNodeInserted 突变事件。

这里的文档：https://developer.mozilla.org/en-US/docs/DOM/Mutation_events

如上页给出的示例用法：

element.addEventListener("DOMNodeInserted", function (ev) {
  // ...
}, false);

注意：2016 年 4 月 17 日

突变事件目前已被弃用。现在推荐的方法是Mutation Observers。