Javascript-форум - Повесить событие до вставки в DOM

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Повесить событие до вставки в DOM (https://javascript.ru/forum/events/63444-povesit-sobytie-do-vstavki-v-dom.html)

Повесить событие до вставки в DOM

Создаю картинку

Код:

  var IMG=document.createElement("IMG");

  ...

  IMG.onclick=(function() { alert(); });

далее, ещё заворачивается в DIV и вставляется в страницу четыре раза

Код:

  for (var i=0; i<4; ++i) {

    var d=DIV.cloneNode(true);

    document.body.appendChild(d);

  }

onclick по картинке не работает, но и ошибок браузер не показывает.
Поставил тот же onclick на d непосредственно перед вставкой в DOM - работает.

Смутно помню, что где-то что-то меня предупреждали, но не было потребности и не запомнил даже суть. Это cloneNode не клонирует обработчики, или что ещё? Подскажите или дайте ссылку.

Спасибо

Цитата:

Сообщение от NG2016 (Сообщение 418760)

NG2016,

Цитата:

Сообщение от developer.mozilla.org

Клонирование узлов копирует все атрибуты и их значения, в том числе собственных (в линию) перехватчиков. Это не копирует пререхватчики событий, добавленных используя addEventListener() или тех что назначены через свойства элемента (т.е node.onclick = fn).

Подробнее тут: Node.cloneNode() (на developer.mozilla.org).

Сделай так:

<!doctype html>
<html><head><meta charset="utf-8">
</head><body>
<script type="text/javascript">
function createImg(str)
{
	var img = document.createElement("img");
	img.src = 'http://javascript.ru/forum/images/editor/insertimage.gif';
	img.onclick = function(){alert('картинка №' + str)};
	return img
}
  
var div = document.createElement("div");
for(var i = 0; i < 4; i++)
{
	var imgEl = createImg(i + 1);
	div.appendChild(imgEl);
}
document.body.appendChild(div);
</script>
</body></html>

Спасибо, работает. Правда долго не мог понять почему :)

Теперь интересует теоретический вопрос, а что будет потреблять больше ресурсов - клонирование или создание. Мне кажется, что создание будет требовать больше ресурсов, т.к. данные функции создающей элемент будут оставаться в памяти.