Форум

NG2016 · #1 (**permalink**) 07.06.2016, 23:27

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

Код:

  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 не клонирует обработчики, или что ещё? Подскажите или дайте ссылку.

Спасибо

pureJS · #2 (**permalink**) 12.06.2016, 18:25

Сообщение от NG2016

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

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

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>

NG2016 · #3 (**permalink**) 12.06.2016, 23:56

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

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

Форум

Справочник

Discord чат

Курсы javascript