Есть ли разница каким способом добавлять обработчик события в js, конкретно элементу или всему документу, смотря со стороны производительности?

Question

[AlexRas]

Вот оба варианта:

document.querySelector('button').addEventListener('click', () => {
  alert(1);
});

document.addEventListener('click', (e) => {
  if (e.target.closest('button')) {
    alert(1);
  }
});

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

Answer 1

[Дмитрий Беляев]

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

По перфомансу:
метод closest не бесплатный и здесь он будет вычислятся на любой клик по документу
создание функций тоже не бесплатно, но можно навешивать одну и ту же функцию на множество событий

хотя по последнему моменту, в коде типичной react-макаки будет создаваться по тысяче функций на каждый чих и никто особо не парится (код то работает на девайсах юзера, за оперативку, проц и электричество платят юзеры, а не те кто свои поделия клепает)