Вызывать функцию, когда содержимое внутри div изменяется?

Question

У меня есть страница, слева есть список ссылок, по которым пользователи могут щелкнуть. При нажатии на элемент div справа будет загружен правильный контент через Ajax по ссылке.
Теперь я хочу запустить функцию, когда содержимое правого элемента div каждый раз меняется.
После поиска в SO я узнаю, что есть Mutation Events , я использую событие DOMSubtreeModified:

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

Однако, когда я нажимаю на ссылку слева, кажется, что handler будет вызываться несколько раз. Я хочу, чтобы он вызывался только один раз, когда новое содержимое было загружено. Как я мог это сделать?

Answer 1

DOMSubtreeModified - это " общее событие для уведомления обо всех изменениях в документе ".Вы можете установить события мутации для определенных мутаций:

1. DOMAttrModified событие
2. DOMCharacterDataModified событие
3. DOMNodeInserted событие
4. DOMNodeInsertedIntoDocument событие
5. DOMNodeRemoved событие
6. DOMNodeRemovedFromDocument событие

И существуют следующие типы:

1. DOMElementNameChanged
2. DOMAttributeNameChanged

Таким образом, если вы заменяете узел, это может вызвать два (или более) события мутации - одно при удалении узла, другое при его замене.Также могут быть отправлены дальнейшие события, такие как изменение символьных данных.если вы прослушиваете событие только при изменении текстового содержимого, попробуйте событие DOMCharacterDataModified :

Пользовательский агент должен отправить это событие после CharacterData.data или ProcessingInstruction.dataбыли изменены, но сам узел не был вставлен или удален.Проксимальным целевым объектом этого события должен быть узел CharacterData или узел ProcessingInstruction.