Как назначить обработчик событий на множество элементов на странице?

Question

[Alex]

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

Я сделал вот так, просто регистрируем обработчик для каждой кнопки:

document.querySelectorAll('button.action').forEach(el => {
		el.addEventListener('click', handler)
})

Но, может есть способ получше?

Answer 1

[Stalker_RED]

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

document.addEventListener('click', evt => {
  if (evt.target.matches('button.action, button.action *')) {
     console.log('target', evt.target)
     let button = evt.target.closest('button')
     console.log('button', button)
  }
})

Comments

[Alex]

Я видел такой вариант, но проблема в том, что в кнопке есть вложенные елементы, и в event.target сохранён именно один из них

[Moses Fender]

Александр Козак, нужно искать вверх требуемый элемент, например через closest()

[Moses Fender]

Александр Козак, Зато этот способ позволяет не напрягаться навешиванием слушателей на элементы при их создании, например после ajax-подгрузки чего-либо.

[Stalker_RED]

Александр Козак, Moses Fender, добавил пару примеров с дочерними вариантами.

[dollar]

Ребята, вы супер! Я нуб и при улучшении Хабра вешал обработчик на каждый комментарий, коих может быть много. Но теперь исправлюсь.

[Alex]

dollar, Stalker_RED
Примитивный тест показал, что при использовании .closest() Производительность чуточку выше. Прилагаю результат:

Answer 2

[Alex]

Немного доработанный ответ Stalker_RED (Обработчик срабатывает при клике по целевому элементу и по любому вложенному

document.addEventListener('click', async function (event) {
	if (!event.target.matches('button.action, button.action *')) {
		return;
	}
})