Да нет особой разницы. Накидал
бенчмарк для трех вариантов делегирования:
p0:
$('.wrapper').on('click', '.btn', function() {
//handler
});
p1:
$('.wrapper').on('click', function(e) {
if ($(e.target).hasClass('btn')) {
//handler
}
});
p2:
document.querySelector('.wrapper').addEventListener('click', function(e) {
if(e.target && e.target.classList.contains('btn')) {
//handler
}
});
Результат для каждого это доли от одной тысячной секунды.
Смело используйте самый удобный для конкретного случая вариант.
Вариант с условием
p1 подойдет для объединения слушателей нескольких элементов(например все кликабельные элементы карточки товара). Так быстрей пройдет инициализация и потребуется меньше памяти. Другое дело, что операции сравнения тоже не дешевые и один
GodEventHandler тоже делать не стоит.
Так же если у кнопки есть дочерние элементы, то тут лучше использовать вариант
p0 , так как он определяет целевой элемент как
e.curentTarget, дочерний элемент клика как
e.target и делегата на котором будет слушать событие как
e.delegateTarget и сработает точно про клику по целевому элементу или его детям. В случаях
p1 и
p2 клик по дочернему элементу пройдет мимо условий, так как
e.target будет дочерним элементом, а не целевым.
Вот, что точно делать не надо, так это вешать без надобности слушатели на
document. Делегировать события надо, по возможности, как можно ближе к целевому элементу. Если вы добавляете кнопки динамически в определенный контейнер, то вешайте обработчик события на него, так слушатель будет срабатывать только по клику внутри контейнера. В вашем же случае он будет срабатывать при каждом клике на любом элементе страницы, создавая тем самым дополнительную нагрузку на браузер.
Пример HTTP аутентификации с использованием Basic схемы.
