div内的内容发生变化时调用函数？答案

【问题标题】：Call a function when the content inside a div is changed?div内的内容发生变化时调用函数？
【发布时间】：2011-06-02 03:50:50
【问题描述】：

我有一个页面，左边有一个用户可以点击的链接列表，当他们被点击时，右边的一个div会根据链接通过Ajax加载正确的内容。
现在我想在右侧 div 的内容每次更改时触发一个函数。
在SO中搜索后得知有Mutation Events，我使用DOMSubtreeModified事件：

right_div.addEventListener("DOMSubtreeModified", handler, false);

但是，当我点击左侧的链接时，似乎handler会被调用几次。我希望它在新内容被加载后只被调用一次。我怎么能这样做？

【问题讨论】：

这些事件目前还没有在所有浏览器中得到广泛支持，要不给修改内容的函数加一个回调函数呢？
@lbu 实际上，这不是我的网站，我想写一个用户脚本来添加一些有用的功能，它只需要在 Chrome 和 Firefox 中运行
如果没有看到您的代码，真的很难提供帮助。但是如果处理程序被多次调用，那可能意味着 DOM 子树被多次修改:-)...所以也许这不是你想要使用的。不能只使用回调，例如，等待 readyState 完成，然后触发你的函数（我假设 jQuery 不是一个选项，因为你没有添加那个标签）？
@squidbe 是的，我不想包含 JQuery，但是如何在用户脚本中访问 readyState？
@squidbe - 我阅读 MDC 文档的方式，readyState 在文档加载期间调度的事件，而不是操作。

【解决方案1】：

DOMSubtreeModified 是“通知文档所有更改的一般事件”。您可以为特定突变设置突变事件：

并且有以下几种：

因此，如果您要替换一个节点，它可能会导致两个（或更多）突变事件 - 一个在节点被移除时，另一个在它被替换时。还可以调度其他事件，例如修改字符数据。如果您仅在文本内容更改时才监听事件，请尝试 DOMCharacterDataModified 事件：

用户代理必须调度此事件在CharacterData.data 或之后 ProcessingInstruction.data 已经修改，但节点本身没有被插入或删除。近端此事件的事件目标必须是 CharacterData 节点或 ProcessingInstruction 节点。

【讨论】：