Обычно, в таких задачах, используют один обработчик, такой подход называется делегированием (паттерн делегирования). Чем больше слушателей есть на странице тем больше тратится памяти. Если у вас более сложный вариант, то рекомендую провести эксперимент и сравнить методы используя средства отладки.
Только вот координаты вам проверять не надо, достаточно будет проверять event.target
:
document.documentElement.addEventListener('click', function(event) {
var target = event.target;
switch (target.className) { // или тут может быть условие
'button':
//...
break;
}
});
Если вы используете jQuery, то примером этого является метод jQuery.on()
Еще:
По поводу цикла и анонимной функции: если мы в цикле будем создавать новую функцию (т.е. определять ее прямо там) то память будет тратится еще и на кучу созданных в цикле функций. Если такое и требуется то следует вынести определение функции из цикла (чтобы она была одна) а в цикле лишь ссылаться на нее, передавая ее в параметре при добавлении события.
Случай, в котором делегирование может быть не столь эффективным:
Вначале представьте ситуацию удачную для использования делегирования: есть элемент отлавливающий клики, на нем элементы которые нужно отлавливать прямо на нем, без вложенных в друг-друга других элементов - все ок.
Теперь обратная ситуация: много вложенных элементов, в ваши элементы (которые надо отлавливать) добавлены другие элементы, да еще и вложенные в друг-друга. Теперь, если мы кликнем внутри нашего элемента то можем попасть на глубоко лежащего дочернего элемента. Чтобы найти нужный нам родительский нам придется идти по target.parentNode
в цикле от нашего элемента до основного на котором событие - это может оказаться более накладным.