5

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

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

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

1 ответ 1

6

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

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

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

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

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

Еще:

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

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

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

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

6
  • 2
    делегирование не панацея. для большого количества вложенных элементов оно может оказаться менее эффективным, чем добавление обработчика каждому нужному элементу
    – Grundy
    Commented 18 авг. 2016 в 13:50
  • Да в этом случае может и ухудшить ситуацию. Но задача по описанию больше похожа на простую или даже больше на тестовую для собеседования. Думаю в более сложных задачах выверять это надо конкретно под задачу, экспериментальным методом. Commented 18 авг. 2016 в 14:47
  • Это больше претензия к формулировке в ответе: Разумеется лучше создать один слушатель. Можно читать как - всегда используй, что не совсем верно.
    – Grundy
    Commented 18 авг. 2016 в 14:49
  • 1
    Ок, я исправил ответ) Commented 18 авг. 2016 в 14:51
  • В каком случае может ухудшить ситуацию? Можно пример? Commented 18 авг. 2016 в 16:13

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.