Возникает ли производительность, если я прикрепляю .on('click' события к $( "body" )?

В настоящее время у меня есть следующий код:

$('#loginLink, #registerLink').click(function () {
        dialog(this);
        return false;
    });

$('#detailData')
    .on('click', '.modalDeleteLink, .modalEditLink', function () {
        dialog(this);
        return false;
    })

Есть только один из #loginLink и #registerLink, но может быть до ста элементов с классами .modalDeleteLink и .modalEditLink.

Я думал изменить все эти элементы, чтобы они имели класс .dialogLink, а затем просто использовали следующий код:

$("body").on("click", ".dialogLink", function(){
   dialog(this);
   return false;
});

Этот код намного проще поддерживать. Однако может ли быть какой-либо недостаток в производительности, связанный с этим телом?

Ответ 1

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

Извлечь из документация:

В большинстве случаев событие , такое как клик, происходит редко, а производительность не представляет существенной проблемы.. Однако высокочастотные события, такие как mousemove или scroll, могут срабатывать десятки раз в секунду, и в этих случаях становится более разумным использовать события разумно. Производительность может быть увеличена за счет сокращения объема работы, выполняемой самим обработчиком, кэширования информации, необходимой обработчику, а не пересчета ее или путем ограничения количества фактических обновлений страниц с помощью setTimeout.

Прикрепление многих делегированных обработчиков событий в верхней части дерева документов может ухудшить производительность. Каждый раз, когда происходит событие, jQuery должен сравнивать все селекторы всех присоединенных событий этого типа с каждым элементом пути от целевой цели до вершины документа. Для обеспечения максимальной производительности присоединяйте делегированные события в местоположении документа как можно ближе к целевым элементам. Избегайте чрезмерного использования документа или документа .body для делегированных событий на больших документах.

Ответ 2

В jQuery, чем выше вы помещаете .on() в DOM, тем медленнее будет. Это связано с тем, что jQuery должен сравнивать все селекторы всех вложенных событий выбранного типа с целевым уровнем документа.

Смотрите страницу документации jQuery для .on():

Прикрепление многих делегированных обработчиков событий в верхней части дерева документов может ухудшить представление. Каждый раз, когда происходит событие, jQuery должен сравнивать все селекторы всех прикрепленные события этого типа к каждому элементу пути от целевой цели до вверху документа. Для обеспечения максимальной производительности присоедините делегированные события в месте расположения документа как можно ближе к целевым элементам. Избегайте чрезмерного использования документа или document.body для делегированных событий в крупных документах.

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