Лучше ли иметь прослушиватель событий, который проверяет много элементов, или каждый элемент имеет свой собственный прослушиватель?

Question

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

1. Есть один прослушиватель событий для mousemove для canvas, и при его запуске он может выполнять итерацию (рекурсивно) по всем узлам дерева и определять, мышь находится над указанным c узлом.
2. Пусть каждый узел зарегистрирует слушателя mousemove и просто проверит, относится ли событие к нему конкретно.

Оба будут работать, но я Я не уверен, что есть лучшие практики, которые необходимо учитывать. Наличие нескольких слушателей тяжелее, чем выполнение широкой проверки на многих узлах.

Answer 1

Как правило, «делегирование событий» считается лучшим по соображениям производительности. Он подключает один слушатель в памяти, который отслеживает ваше событие на самом верхнем уровне, где ваше событие может произойти.

Мало того, что это увеличивает производительность, но если вы добавляете новые элементы динамически (например, добавление нового узла) существующий обработчик будет применяться к вашему новому элементу.

Вот несколько ресурсов по этому поводу, один специально для Canvas (хотя он немного ... плотный).

Общее делегирование / пузыри: https://ehsangazar.com/optimizing-javascript-event-listeners-for-performance-e28406ad406c

Canvas Specifi c: http://dbp-consulting.com/tutorials/canvas/CanvasEventDelegation.html

Answer 2

Ответ, как всегда, «это зависит».

Если бы у вас были индивидуальные слушатели, насколько было бы сходство? Если все они уникальны, то отдельные слушатели будут более гибкими.

В качестве альтернативы, если бы у вас был один общий слушатель, сколько кода вам понадобилось бы, чтобы удовлетворить различия между узлами? Если нет различий, то это явно лучший вариант.

Где-то посередине вы должны сделать суждение, хотя большинство людей склоняются к варианту с одним слушателем, поскольку должен использовать меньше памяти.