Какой вариант правильнее и лучше?

Question

[bagerman]

Приветствую!

Какой правильнее, так :

for (var i = 0; i < div.children.length; i++) {
	p[i].onclick = function(e) {
		console.log(e.target.parentNode.removeChild(e.target));
	};
}

или использовать this:

for (var i = 0; i < div.children.length; i++) {
	p[i].onclick = function() {
		console.log(this.parentNode.removeChild(this));
	};
}

Спасибо

Answer 1

[Максим Дунаевский]

Оба плохие. Нужно ставить обработчик на контейнер, содержащий эти элементы, и перехватывать всплытие события по DOM. Подробности гуглите по словам "делегированная обработка событий". Вот хорошая статья по теме.
Так же все переменные лучше объявлять в начале модуля, a-la Pascal, а не в месте непосредственного использования, чтобы не столкнуться с проблемой всплытия переменной.

Comments

[bagerman]

На контейнер, например?

[Максим Дунаевский]

bagerman: Я так и написал "ставить обработчик на контейнер". Разве нет?

[bagerman]

Максим Дунаевский: Я понял, объясните как и на какой контейнер?:)

[Максим Дунаевский]

bagerman:
СТАТЬЮ НЕ ЧИТАЙ
@
ВОПРОСЫ ЗАДАВАЙ
Ваши div'ы находятся внутри другого элемента DOM, вот на него и надо ставить обработчик, указав, что обрабатывать события нужно только в том случае, если отправитель - элемент нужного типа, а не сам контейнер.

[bagerman]

Максим Дунаевский: На чистом JS покажите, пожалуйста, маленький пример

[Максим Дунаевский]

bagerman: всё написано до нас: https://learn.javascript.ru/event-delegation

[bagerman]

Максим Дунаевский: Можно еще вопрос, пока Вы здесь). Что означает: кэширование в цикле, когда проходишь по узлам в DOM, как делается это кэширование или оптимизация?

[Максим Дунаевский]

bagerman: Я так понимаю, это уже не имеет отношения к исходному вопросу?
Тут возможны минимум две трактовки понятия "кэширование". В первом случае все найденные элементы помещаются в массив, при необходимости обращения к ним они извлекаются уже из него, а не отыскиваются медленными методами в дереве DOM.
Вторая трактовка касается операций вставки. Вставка суммы элементов в DOM выполняется быстрее, чем последовательная вставка каждого элемента:
A+B>DOM << A>DOM + B>DOM
Т.е. быстрее создать шаблон в цикле путём сложения N строк, а потом сумму вставить в DOM, чем вставлять строки по одной. Подробнее расписано у Закаса в его "JavaScript. Оптимизация производительности".

[bagerman]

Максим Дунаевский: Большое Вам спасибо!

Answer 2

[Константин Китманов]

Корректно отделять бизнес-логику от обработчиков, на самом деле:) А вообще учитывая, какие неприятности доставляет новичкам this в джаваскрипте, лучше полагаться на событие.

function removeNode (node) {
  return node.parentNode.removeChilde(node);
}

for (var i = 0; i < div.children.length; i++) {
  p[i].onclick = function (event) {
    console.log(removeNode(event.target));
  };
}

P.S. Не пишите e как имя аргумента обработчика, пожалуйста. Что это за e – event, exception, error?

Comments

[bagerman]

Хорошо:)

Answer 3

[Александр Таратин]

https://developer.mozilla.org/ru/docs/Web/API/Even...