用于 DOM 更改时的 JavaScript 事件侦听器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5305457/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript Event Listeners for when the DOM changes
提问by Mojah
I'm writing a Mozilla Firefox Extension (Javascript without the BS of having to identify if it's IE or Firefox), where I find myself stuck in the following situation. On a page load, I add event listeners like so:
extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true);
我正在编写一个 Mozilla Firefox 扩展（Javascript，没有必须识别它是 IE 还是 Firefox 的 BS），我发现自己陷入了以下情况。在页面加载时，我添加事件侦听器，如下所示：
extension.addEventListener("DOMContentLoaded", extension.onPageLoad, true);
That would execute m "onPageLoad()" method as soon as the DOM is loaded, meaning all data is received. And that works, but I need to find a way to add a listener for when the DOM changes. The extension should read all data in the appbrowser-window, even if that's update via AJAX calls (ie: twitter, facebook).
这将在加载 DOM 后立即执行 m "onPageLoad()" 方法，这意味着接收到所有数据。这有效，但我需要找到一种方法来为 DOM更改添加侦听器。扩展程序应该读取 appbrowser-window 中的所有数据，即使是通过 AJAX 调用（即：twitter、facebook）进行更新。
I've looked into the DOMSubtreeModifiedevent, but that doesn't seem to work when content is dynamically added after the initial DOMContentLoadedevent has fired.
我查看了DOMSubtreeModified事件，但是在初始DOMContentLoaded事件触发后动态添加内容时，这似乎不起作用。
Has anyone ever overcome this problem?
有没有人克服过这个问题？
My alternative is to keep firing the same function with a timeout()of say 2 seconds, to reread the DOM and parse it, but I prefer to only do that if it actually changed.
我的替代方法是用timeout()2 秒的时间继续触发相同的函数，重新读取 DOM 并解析它，但我更喜欢只在它实际发生变化时才这样做。
回答by Tim Down
DOMSubtreeModifieddoes work and has become reasonably well supported (Firefox and WebKit have supported it for years, IE only in version 9, Opera apparently still not at all). There is no limitation relating to whether DOMContentLoadedhas fired or not, so I'd suggest your test was flawed. See here for an example: http://jsfiddle.net/timdown/GB6Rz/
DOMSubtreeModified确实有效并且得到了相当好的支持（Firefox 和 WebKit 多年来一直支持它，IE 仅在版本 9 中，Opera 显然仍然完全没有）。是否DOMContentLoaded已触发没有任何限制，因此我建议您的测试存在缺陷。请参见此处的示例：http: //jsfiddle.net/timdown/GB6Rz/
Other DOM mutation events such as DOMNodeInsertedare better supported (although still not in IE < 9), so I'd suggest using those where possible.
其他 DOM 突变事件，例如DOMNodeInserted得到更好的支持（尽管在 IE < 9 中仍然没有），所以我建议尽可能使用那些。
回答by MK_Dev
It sounds like you're looking for DOM Mutation Events. While DOMSubtreeModifiedis listed on WikiPedia page, I don't see it on MDC page. The best bet is to listen to the three MDC events and see if they do what you need.
听起来您正在寻找DOM Mutation Events。虽然DOMSubtreeModified列在WikiPedia 页面上，但我在 MDC 页面上没有看到它。最好的办法是聆听三个 MDC 事件，看看它们是否满足您的需求。
回答by jdunk
For anyone finding this in 2017 or later, these DOM modification events have been deprecated. What you want instead is MutationObserver.
对于在 2017 年或之后发现此问题的任何人，这些 DOM 修改事件已被弃用。你想要的是MutationObserver.
See the MutationObserver docson MDN, or this SO answerfor more details.
有关更多详细信息，请参阅MDN 上的MutationObserver 文档或此 SO 答案。
