当div内的内容改变时调用函数？ [英] Call a function when the content inside a div is changed?

问题描述

我有一个页面，左边有一个用户可以点击的链接列表，当他们点击时，右侧的div将根据链接通过Ajax加载正确的内容。

现在我想在右侧div的内容每次更改时启动一个功能。

在SO中搜索后，我知道有一个突变事件，我使用 DOMSubtreeModified 事件： p>

I have a page, on the left there is a list of links users can click, when they are clicked, a div on the right side will load the correct content via Ajax according to the link.
Now I want to fire a function when the right side div's content changed every time.
After a search in SO, I learn that there are Mutation Events, I use the DOMSubtreeModified event:

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

但是，当我点击左侧的链接时，似乎处理程序将被调用几次。我希望它的新内容被加载时，只能被调用一次。我该怎么做？

However, when I click the link on the left side, it seems that handler will be called several time. I want it be called only once when the new contents of it has been loaded. How could I do this?

推荐答案

DOMSubtreeModified 是一个常规事件，用于通知文档的所有更改， EM>。您可以为特定突变设置突变事件：

The DOMSubtreeModified is "a general event for notification of all changes to the document". You can set mutation events for specific mutations:

1. DOMAttrModified 事件


2. DOMCharacterDataModified 事件


3. DOMNodeInserted 事件


4. DOMNodeInsertedIntoDocument 事件


5. DOMNodeRemoved 事件


6. DOMNodeRemovedFromDocument 事件

1. DOMAttrModified event
2. DOMCharacterDataModified event
3. DOMNodeInserted event
4. DOMNodeInsertedIntoDocument event
5. DOMNodeRemoved event
6. DOMNodeRemovedFromDocument event

还有以下类型：

1. DOMElementNameChanged


2. DOMAttributeNameChanged

1. DOMElementNameChanged
2. DOMAttributeNameChanged

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

So if you are replacing a node, it might cause two (or more) mutation events - one when the node is removed, another when it is replaced. Futher events may also be dispatched, such as character data modified. if you are listening for an event only when the text content is changed, try the DOMCharacterDataModified event:

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

A user agent must dispatch this event after CharacterData.data or ProcessingInstruction.data have been modified, but the node itself has not been inserted or deleted. The proximal event target of this event must be the CharacterData node or the ProcessingInstruction node.

这篇关于当div内的内容改变时调用函数？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！