JavaScript事件监听器：当DOM发生变化时

Question

我正在编写一个Mozilla Firefox扩展程序（使用Javascript，无需识别IE或Firefox），但我遇到了以下问题。在页面加载时，我会添加事件监听器，如下所示： extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true); 这将在DOM加载后立即执行我的“onPageLoad()”方法，意味着所有数据都已接收。这起作用了，但我需要找到一种方法来添加一个监听器以便在DOM更改时能够读取应用程序浏览器窗口中的所有数据，即使通过AJAX调用更新（例如：Twitter，Facebook）。

我研究过DOMSubtreeModified事件，但当内容在初始DOMContentLoaded事件触发后动态添加时，它似乎不起作用。

有人解决过这个问题吗？

我的替代方案是使用2秒的timeout()重复调用相同的函数来重新读取并解析DOM，但如果实际上没有更改，我更喜欢只在必要时执行此操作。

- Mojah

---

顺便说一下，你还应该进行限流。 - Pier Paolo Ramon

Answer 1

DOMSubtreeModified可以起作用，并且已经得到了相当好的支持（Firefox和WebKit已经支持它多年，IE只在版本9中支持，Opera显然根本不支持）。与是否触发DOMContentLoaded无关，因此我建议您的测试有缺陷。请参见此处的示例：http://jsfiddle.net/timdown/GB6Rz/ 其他DOM变异事件，例如DOMNodeInserted得到了更好的支持（尽管在IE＜9中仍不支持），因此建议在可能的情况下使用这些事件。

- Tim Down

---

似乎我的事件处理程序确实出了问题，因为现在在 Facebook 上它可以用于动态加载的内容，但由于某种原因，在 Twitter 上没有返回任何结果。当页面加载时，我会发现大约十几个HTML元素（仅其正文），并且我会看到不同的DOMSubtreeModified在AJAX调用重新加载正文时触发，但未添加任何事件。我是否正确地假设在我的事件处理程序中我仍然可以使用'aEvent.originalTarget'来获取当前文档function(aEvent))？ - Mojah

Answer 2

看起来你正在寻找 DOM变异事件。虽然 DOMSubtreeModified 在 维基百科页面 中被列出，但我在 MDC 页面上没有看到它。最好的方法是监听三个 MDC 事件并查看它们是否满足你的需求。

- MK_Dev

---

DOMSubtreeModified 对我一直有效。 - Jage

@Jage：这对通过Ajax动态插入的元素有效吗？如果我使用DOMSubtreeModified和简单的控制台日志记录，除了初始页面解析之外，我没有得到其他结果。 - Mojah

什么浏览器？我正在使用它来检测特定的ajax变化。为了公平起见，我只在FF和Chrome中进行了测试。 - Jage

Answer 3

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

请参阅MDN上的MutationObserver文档，或者此SO答案以获取更多详细信息。

- jdunk