DOM更改时的JavaScript事件侦听器[重复]

Posted 2023-05-07

【中文标题】DOM更改时的JavaScript事件侦听器[重复]

【英文标题】：JavaScript Event Listeners for when the DOM changes [duplicate]

【发布时间】：2011-07-15 09:30:39

【问题描述】：

我正在编写一个 Mozilla Firefox 扩展程序（javascript 无需识别它是 IE 还是 Firefox），我发现自己陷入了以下情况。在页面加载时，我像这样添加事件侦听器： extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true);

这将在 DOM 加载后立即执行 m "onPageLoad()" 方法，这意味着所有数据都已接收。这很有效，但我需要找到一种方法来为 DOM 更改 添加一个监听器。扩展程序应该读取 appbrowser 窗口中的所有数据，即使是通过 AJAX 调用（即：twitter、facebook）更新。

我查看了 DOMSubtreeModified 事件，但在初始 DOMContentLoaded 事件触发后动态添加内容时，这似乎不起作用。

有人克服过这个问题吗？

我的替代方法是继续使用 timeout() 触发相同的函数，例如 2 秒，重新读取 DOM 并解析它，但我更愿意只在它实际发生变化时才这样做。

【问题讨论】：

（我知道这是一个老问题）顺便说一句，你也应该限制它。

【参考方案1】：

DOMSubtreeModified 确实有效并且得到了相当好的支持（Firefox 和 WebKit 多年来一直支持它，IE 仅在版本 9 中，Opera 显然仍然不支持）。 DOMContentLoaded 是否被解雇没有限制，所以我建议你的测试有缺陷。示例见此处：http://jsfiddle.net/timdown/GB6Rz/

更好地支持其他 DOM 突变事件，例如 DOMNodeInserted（尽管在 IE

【讨论】：

似乎我的事件处理程序确实存在问题，因为它现在适用于 Facebook 上动态加载的内容，但出于某种疯狂的原因，它在 Twitter 中没有给出任何结果。我在页面加载时发现了十几个 html 元素（只是它们的正文），当 AJAX 调用重新加载正文但没有添加任何事件时，我看到了不同的 DOMSubtreeModified 触发。我是否可以假设在我的事件处理程序中我仍然可以使用'aEvent.originalTarget'来获取当前文档函数（aEvent））？

【参考方案2】：

听起来您正在寻找DOM Mutation Events。虽然 DOMSubtreeModified 列在 WikiPedia page 上，但我在 MDC 页面上没有看到它。最好的办法是听三个 MDC 事件，看看它们是否符合您的需要。

【讨论】：

DOMSubtreeModified 一直在为我工作

@Jage：适用于通过 Ajax 动态插入的元素？如果我将 DOMSubtreeModified 与简单的控制台日志记录一起使用，除了初始页面解析之外，我不会得到任何其他结果。

什么浏览器？我正在使用它来专门检测来自 ajax 的更改。公平地说，我只在 FF 和 chrome 中进行了测试。

【参考方案3】：

对于在 2017 年或之后发现此问题的任何人，这些 DOM 修改事件已被弃用。你想要的是MutationObserver。

查看 MDN 上的MutationObserver docs，或this SO answer 了解更多详情。