javascript - 当项目添加到 DOM 或从 DOM 中删除时，是否有 JavaScript 事件？

Question

我正在尝试构建一个 Chrome 浏览器扩展，它应该可以增强 Twitter 网站在 Google Chrome 中的行为方式。我想标记加载新推文时向下移动的顶部推文，然后滚动到它。

通过使用 .live() Hook mousedown 事件，我可以在点击之前获取最上面的推文。之后，我必须等到推文加载完毕，然后才能向下滚动到上一条推文。我现在使用 setTimeout() 进行了黑客攻击，这对我有用，但我想要一个更好的解决方案。

可能的解决方案:

• 以某种方式 Hook 当元素加载到 div 时触发的事件
• Hook 一个在元素从 DOM 中删除时触发的事件

Answer 1

由于您的目标是 Google Chrome，因此您可以使用 DOM Level 2 Mutation Events ，具体来说:

• DOMNodeInserted
• DOMNodeRemoved

您可以使用addEventListener绑定(bind)它们:

someElement.addEventListener('DOMNodeInserted', eventHandlerFunction, false);

或者因为您使用的是 jQuery，所以使用 bind 方法:

$(selector).bind('DOMNodeInserted', function () { 
  //..
});​

请小心不要修改这些事件中受影响的 DOM，因为您可能会陷入无限事件递归，例如，如果您在 DOMNodeInserted 事件中插入一个元素，它将再次触发。