Множество элементов - слушатель для каждого или общий?

#javascript

На странице имеется неопределённое множество элементов. Необходимо обработать нажатие
и отжатие по каждому элементу. Как лучше - назначить слушатель каждому элементу или
один на документ, который будет отслеживать клики и сверять их по координатам элементов?

Как влияет количество слушателей на производительность? Отразится на ней назначение
в цикле анонимной функции, не вынесенной в переменную?

Для уточнения, во втором случае мы выбираем все элементы, записываем их координаты,
назначаем слушатель на документ и при клике проходим по записям, ища клик внутри элемента.
    

Ответы

Ответ 1

Обычно, в таких задачах, используют один обработчик, такой подход называется делегированием
(паттерн делегирования). Чем больше слушателей есть на странице тем больше тратится
памяти. Если у вас более сложный вариант, то рекомендую провести эксперимент и сравнить
методы используя средства отладки.

Только вот координаты вам проверять не надо, достаточно будет проверять event.target:

document.documentElement.addEventListener('click', function(event) {
    var target = event.target;

    switch (target.className) { // или тут может быть условие
        'button':
            //...
            break;
    }
});


Если вы используете jQuery, то примером этого является метод jQuery.on()

Еще:

По поводу цикла и анонимной функции: если мы в цикле будем создавать новую функцию
(т.е. определять ее прямо там) то память будет тратится еще и на кучу созданных в цикле
функций. Если такое и требуется то следует вынести определение функции из цикла (чтобы
она была одна) а в цикле лишь ссылаться на нее, передавая ее в параметре при добавлении
события.

Случай, в котором делегирование может быть не столь эффективным:

Вначале представьте ситуацию удачную для использования делегирования: есть элемент
отлавливающий клики, на нем элементы которые нужно отлавливать прямо на нем, без вложенных
в друг-друга других элементов - все ок. 

Теперь обратная ситуация: много вложенных элементов, в ваши элементы (которые надо
отлавливать) добавлены другие элементы, да еще и вложенные в друг-друга. Теперь, если
мы кликнем внутри нашего элемента то можем попасть на глубоко лежащего дочернего элемента.
Чтобы найти нужный нам родительский нам придется идти по target.parentNode в цикле
от нашего элемента до основного на котором событие - это может оказаться более накладным.