用于DOM更改时的JavaScript事件侦听器

Question

我正在编写一个Mozilla Firefox扩展程序（Javascript没有BS必须确定它是IE还是Firefox），我发现自己陷入了以下情况。在页面加载时，我添加如下事件监听器： extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true);

一旦加载DOM，就会执行m“onPageLoad（）”方法，这意味着接收到所有数据。这是有效的，但我需要找到一种方法来为DOM 更改时添加一个监听器。扩展应该读取appbrowser窗口中的所有数据，即使是通过AJAX调用更新（即：twitter，facebook）。

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

有没有人克服过这个问题？

我的替代方案（上帝原谅我）是继续使用2秒的超时（）来触发相同的函数，重新读取DOM并解析它，但我更愿意只在实际更改时才这样做。

Answer 1

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

其他DOM突变事件（例如DOMNodeInserted）得到更好的支持（尽管仍然不在IE＆lt; 9中），所以我建议尽可能使用它们。

Answer 2

听起来你正在寻找DOM Mutation Events。虽然 DOMSubtreeModified 列在WikiPedia page上，但我在MDC页面上看不到它。最好的办法是听取三个MDC事件，看看他们是否做了你需要的事情。

Answer 3

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

有关详细信息，请参阅MDN上的MutationObserver docs或this SO answer。