15

Есть ли событие в JavaScript, возникающее при изменении содержимого тега? Например, при изменении содержимого <div></div>

3
  • Любого тега или какого-то конкретного? Меняете содержимое вы или нет?
    – VenZell
    30 окт 2015 в 22:44
  • Прочитайте про onchange. Если скорректируете вопрос - сможем более точно направить вас.
    – mix
    30 окт 2015 в 23:27
  • Для блочного тега, типа <div></div>, изменяю не я. Просто с Greasemonkey балуюсь
    – LukavskyM
    31 окт 2015 в 19:17

2 ответа 2

21

Введение


Была попытка сделать события на изменения элементов в DOM, да всплыла, уж очень оно сильно влияло на производительность. Называются они в литературе Mutation events:

  1. DOMAttrModified - если изменился атрибут у элемента DOM;
  2. DOMAttributeNameChanged - если изменилось имя атрибута у элемента DOM;
  3. DOMCharacterDataModified - если изменился какой-либо текст, будь то обычный 'text node' или простой комментарий у элемента DOM;
  4. DOMElementNameChanged - если изменилось имя у элемента DOM;
  5. DOMNodeInserted - если у элемента DOM произошла вставка нового элемента;
  6. DOMNodeInsertedIntoDocument - если произошла вставка нового элемента в document;
  7. DOMNodeRemoved - если у элемента DOM произошло удаление какого-либо элемента;
  8. DOMNodeRemovedFromDocument - если произошло удаление какого-либо элемента в document;
  9. DOMSubtreeModified - если произошло какое-либо изменение в document.

Все они 'deprecated' и крайне не рекомендуются к использованию. Тем более, далеко не факт, что они будут работать в Вашем браузере, а проверить наличие этого события не такая уж тривиальная задача, так как атрибутов у элементов с одноименным названием нет.

Альтернатива 0, для внимательных


Как альтернатива примем тот факт, что всегда можно создавать свои события, всплывающие при изменениях. То есть можно сделать вот так:

  1. придумываем название события, например, DOM:changed;
  2. создаем функции-обработчики и подписываем их на эти события;
  3. находим все функции, которые могут потенциально изменить DOM;
  4. при любых, интересующих Вас, изменениях в DOM в этих функциях вызываем пользовательское событие.

У этого метода потрясающие возможности в управлении уведомлениями, всегда можно выбрать, что вызывает событие, аккуратно их фильтровать и создавать удобную атмосферу для их вызова. Но всегда есть возможность забыть добавить это в код, надо быть внимательным и тщательно всё затестировать.

Альтернатива 1, простая


Можно придумать ещё два способа это сделать.

Первый, в лоб, не совсем корректный, но имеет место жить на небольших данных, далее я расскажу о правильном:

  1. берём эталонный .innerHTML у Вашего div'а и сохраняем его куда угодно, например, в sessionStorage
  2. каждые n секунд сравниваем текущий .innerHTML с эталонным, если не равны, значит произошли какие-либо изменения и вызываем callback. Можно красиво обернуть в промис. Можно даже вместо вызова callback вызывать свое пользовательское событие.

Способ хорош, быстр, если div не многокилометровый. Самое главное - весьма и весьма кроссбраузерный, заработает даже в ie7. Но вот если div будет большим, то это может вызывать тормоза.

Альтернатива 2, то, что надо


Второй способ правильный. После неудачной попытки со специальными событиями, придумали, оно действительно работает в хороших браузерах, MutationObserver(), а если нет, то его полифилл. Как его использовать? А вот так.

Сначала создадим объект MutationObserver:

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        console.dir(mutation); //объект с изменениями
    });    
});

В данном случае mutations - массив MutationRecord, каждый элемент которого содержит следующие поля:

  1. type - все измененные атрибуты или characterData (текстовый элемент или комментарий) или childList в зависимости от типа мутации;
  2. target - элемент дерева, в котором произошло изменение;
  3. addedNodes - NodeList, содержащий добавленные элементы дерева, логично, что он будет пуст (*.length == 0), если таких не будет.
  4. removedNodes - NodeList, содержащий удаленные элементы дерева, он тоже будет пуст, если таких иметься не будет;
  5. previousSibling - предыдущий сосед по дереву добавленного или удаленного элемента или null;
  6. nextSibling - следующий сосед по дереву добавленного или удаленного элемента или null;
  7. attributeName - имя измененного атрибута или null;
  8. oldValue - старые значения, до изменения, но в случае, если изменение произошло в childList - null.

Затем, чтобы эта прелесть заработала, скажем интерпретатору "начать слежение":

observer.observe(
    elem,
    {
        childList: true,
        attributes: true,
        subtree: true,
        characterData: true,
        attributeOldValue: true,
        characterDataOldValue: true,
        attributeFilter: true
    }
);

Первым аргументом мы передаем объект DOM, за которым нужно следить, вторым - то, как мы будем следить:

  1. childList - следим за вставкой/удалением элементов в childList;
  2. attributes - следим за изменением атрибутов
  3. characterData - следим за изменением characterData (текстовые элементы или комментарии)
  4. attributeOldValue - запоминаем значение атрибута до изменения
  5. characterDataOldValue - запоминаем значение characterData до изменения
  6. attributeFilter - Array тех атрибутов, за которыми будем следить

Для того, чтобы остановить слежение можно вызвать метод observer.disconnect();.

Предостережение


Не советую изменять элемент DOM, за которым мы следим, может получиться весьма пикантная ситуация.

Забытая на потом последняя альтернатива


Стоит упомянуть, что существует стандартное событие, полностью кроссбраузерное и работающее - onchange.

Работает оно в элементах <input>, <select>, и <textarea>. Срабатывает при изменении, увы только пользователем, данных внутри только этих объектов. При изменении данных в скрипте, событие надо вызывать собственноручно.

4
  • Я бы добавил еще вариант с использованием собственных событий. При загрузке документа мы подписываемся на собственное событие, а после необходимых изменений содержимого вручную объявляем о нем.
    – VenZell
    31 окт 2015 в 8:46
  • @VenZell, по сути это Альтернатива 1 в моем ответе, только вызов коллбека можно заменить созданием пользовательского события. Или я Вас не правильно понял? Добавлю это в ответ.
    – Rolandius
    31 окт 2015 в 8:54
  • 1
    Сделал пример: jsfiddle.net/0ud89twf чтобы лучше пояснить свою мысль.
    – VenZell
    31 окт 2015 в 9:11
  • @VenZell, можно и так, но тогда надо в любую функцию изменяющую дом добавлять, но правда, имеет право существовать как вариант. Спасибо.
    – Rolandius
    31 окт 2015 в 9:29
8

Прослушать можно любой тег. Для прослушки изменения в поддереве нужно использовать DOMSubtreeModified.

В примере ниже есть 2 параграфа <p> - demo1 и demo2. На document установлено событие клика - такое, что при клике на любой участок страницы, содержимое demo1 меняется на demo1 -> Hello World!. Другой слушатель ждёт изменение в поддереве demo1, и когда событие наступает, содержимое demo2 меняется на demo1 Changed!

document.getElementById("demo1").addEventListener("DOMSubtreeModified", function() {
  document.getElementById("demo2").innerHTML = "demo1 Changed!"
});

document.addEventListener("click", function() {
  document.getElementById("demo1").innerHTML = "demo1 -> Hello World!";
});
<p id="demo1">demo1</p>
<p id="demo2"></p>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.