#javascript #jquery #widgets #javascript_events
У меня есть div, содержимое которого может меняться различными способами: например,
весь его контент может быть изменён через innerHTML, или могут быть добавлены узлы
через DOM-методы. Это может произойти через собственный javascript или через вызовы
jQuery API, или через другие библиотеки.
Я хочу выполнить некоторый код, когда содержимое div изменится, но я абсолютно не
контролирую, когда он изменится. Действительно, я разрабатываю плагин, который может
использоваться другими людьми, которые могут свободно изменять содержимое своих div'ов
так, как они предпочитают. Когда внутреннее содержимое этого div изменяется, форма
плагина также может быть обновлена.
Я использую jQuery. Есть ли способ отловить изменение содержимого div?
Ответы
Ответ 1
MutationObserver (поддержка)
const observer = new MutationObserver(mutations => console.log(mutations));
observer.observe(test, {
attributes: true,
childList: true,
characterData: true,
subtree: true
});
test.innerHTML = '1';
test.classList.add('test');
test.appendChild(document.createElement('br'));
test.innerHTML += '2';
Ответ 2
Вы можете использовать DOMNodeInserted и DOMNodeRemoved, чтобы проверить, добавлены
или удалены элементы. К сожалению, IE не поддерживает это.
$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {
if (event.type == 'DOMNodeInserted') {
alert('Content added! Current content:' + '\n\n' + this.innerHTML);
} else {
alert('Content removed! Current content:' + '\n\n' + this.innerHTML);
}
});
Можно сохранить исходное содержимое и будущие изменения с помощью .data(). Вот пример.
var div_eTypes = [],
div_changes = [];
$(function() {
$('#myDiv').each(function() {
this['data-initialContents'] = this.innerHTML;
}).bind('DOMNodeInserted DOMNodeRemoved', function(event) {
div_eTypes.concat(e.type.match(/insert|remove/));
div_changes.concat(this.innerHTML);
});
});
Пример вывода:
> $('#myDiv').data('initialContents');
"Привет мир!
Это пример.
"
> div_eTypes;
["insert", "insert", "remove"]
> div_changes;
["", "IANA — Example domains
", "IANA – Example domains
"]
Возможно, вы захотите включить DOMSubtreeModified, так как DOMNodeInserted и DOMNodeRemoved
не запускаются, если элементы заменены через innerHTML. Он не работает в IE, но, по
крайней мере, он отлично работает в других браузерах.
