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

Question

[AlexRas]

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

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

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

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

Вот в таком виде:

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

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

Comments

[Олег]

ERROR SAFETY во-втором случае по моему хуже.

Как бы мы не тестировали код, но ошибки в прод все равно просочаться.

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

сейчас у Вас идет первой строкой проверка
if (e.target.closest('button3')) {
не дай бог где то кто-то напишет строчку кода выше и .....
(будет выполняться на каждый чих и при ошибке в ней упадет все)

Answer 1

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

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

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

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

Answer 2

[Евгений]

Судя по вопросу есть много одинаковых элементов, например в таблице, тогда первое скорее всего будет выглядеть так:

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

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

Comments

[AlexRas]

Не правильно выразился в вопросе, имел ввиду много РАЗНЫХ элементов с разными функциями, а не одинаковых.

[AlexRas]

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

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

[Евгений]

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

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

Но как и писал выше, из-за того что сейчас повсеместно асинхрон, обычной практикой является вешать обработчик на документ и перебор через всплытие, движки браузеров под это заточены. Есть много вариантов обработки кликов, всё зависит от задачи, для меня не принципиально так как могу и в верстку добавить в элемент onclick="doSomeThing(this)".

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

Answer 3

[Артём Дайнов]

Голосую за второй вариант и за него веду пропаганду.
И вот почему.
1. Один обработчик для всех кликов на странице.
2. Через условия можно решить как обрабатывать конкретный нажаты элемент.
3. Если интерфейс будет формироваться динамически, то новые обработчики не придется создавать.

А так, наверное делать можно как хочешь.

Comments

[Евгений]

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

[AlexRas]

Евгений, это немного другое, тут без вариантов получается.

[Ankhena]

AlexRas,

тут без вариантов получается

Ну как без вариантов...
Есть оверлей, на который можно повесить клик.
Есть popover, которые сами закрываются по клику мимо себя (конечно, если не manual).
Так что варианты всё таки есть.

Answer 4

[Олег]

Вопрос по моему аналогичен PHPному "какие кавычки быстрее? одинарные или двойные"

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