Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.06.2016, 23:27
Интересующийся
Посмотреть профиль Найти все сообщения от NG2016
 
Регистрация: 08.05.2016
Сообщений: 20

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

Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 12.06.2016, 18:25
Аватар для pureJS
Аспирант
Отправить личное сообщение для pureJS Посмотреть профиль Найти все сообщения от pureJS
 
Регистрация: 04.06.2016
Сообщений: 70

Сообщение от 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>
Ответить с цитированием
  #3 (permalink)  
Старый 12.06.2016, 23:56
Интересующийся
Посмотреть профиль Найти все сообщения от NG2016
 
Регистрация: 08.05.2016
Сообщений: 20

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
инициализация плагинов до вставки html-я в DOM FanAizu jQuery 3 18.01.2014 23:16
повесить обработчик на событие Ia_alex Events/DOM/Window 2 17.09.2012 13:23
Повесить событие на изменение DOM nebaz Events/DOM/Window 5 17.06.2012 14:15
повесить событие на массив элементов zlodiak Элементы интерфейса 1 24.02.2012 11:57
Не получается повесить событие wine-time Элементы интерфейса 2 23.07.2011 02:54