Объясните почему не срабатывает addEventListener?

Question

[Shimpanze]

Здравствуйте!

Копирую информацию из одного контейнера в другой и мне необходимо отследить момент, когда этот процесс закончен полностью.

Пишу так:

// само копирование
document.getElementById('temp-content').innerHTML = document.getElementById('content').value;

// далее навешиваю обработчик который следит за контейнером
// и (теоретически) должен мне сообщить когда тот будет полностью готов
document.getElementById('temp-content').addEventListener("load", function() {
  alert('Весь HTML-контент загружен в контейнер!');
});

Мне важно именно событие load, так как оно позволяет отследить полную загрузку всех ресурсов (включая изображения).

Спасибо!

Answer 1

[Антон]

Потому что такого события нету.
HTML вставляется синхронно, тут события не нужны.
Чтобы отследить загрузку изображений, нужно после вставки выбрать все изображения в нужном элементе, и на каждое навесить обработчик.
При том нужно учитывать, что какое-то изображение может не загрузиться, а какое-то зависнуть в состоянии загрузки.

Comments

[Alexander Litvinenko]

есть, только он у window

[Антон]

Alexander Litvinenko, именно это я и имел в виду

Answer 2

[Alexander Litvinenko]

DomContentLoaded - готовность DOM к работе, событие у document
load - загруженны, событие у window
если temp-content не iframe то изменения в нем с точки зрения алгоритма происходят без задержек, по крайней мере это быстро и учитываеться при обращениях к DOM
про изображения Антон уже написал, для всех подобных вещей будет схожая ситуация
Для отслеживания изменений вам нужен Observer