event.target with element.addEventListener

Question

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

Вкратце, существуют ли значительные выигрыши в производительности в JavaScript при ограничении числа прослушивателей событий.

Answer 1

Имеются компромиссы между использованием распространения событий с помощью одного обработчика событий и отдельных обработчиков событий для каждого объекта. Какой компромисс лучше всего для вас, полностью зависит от ваших индивидуальных обстоятельств. Нет единого ответа, который лучше всего подходит для всех ситуаций.

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

При установке/настройке обработчик одного события, прикрепленный к родительскому объекту, будет быстрее инициализироваться, чем инициализировать обработчик событий на каждом отдельном объекте.

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

В конце концов разница во времени, вероятно, достаточно мала, чтобы быть бессмысленной, если у вас нет тысяч объектов. Я бы предложил выбрать вариант, который сделает самый чистый, простейший код.