Правильный способ обработки многих слушателей событий в JavaScript

Question

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

В настоящее время я использую onclick в htmlи может передавать идентификатор через параметр функции, так как я использую литералы шаблона для визуализации списка.

Есть ли способ сделать это с помощью прослушивателей событий?

Пример того, чтоВ настоящее время у меня будет:

onclick="theFunction('id')"

, который изменяется для каждого элемента в списке, поэтому список может выглядеть как

<ul>
<li onclick="theFunction('id1')">name1</li>
<li onclick="theFunction('id2')">name2</li>
<li onclick="theFunction('id3')">name3</li>
</ul>

Answer 1

Вместо этого используйте делегирование событий: присоедините один слушатель к <ul>, а затем при щелчке проверьте, был ли выбранный элемент <li>.Если это так, проверьте атрибут <li>, чтобы выяснить, с каким параметром вызывать theFunction.Например:

const theFunction = console.log;

document.querySelector('ul').addEventListener('click', (e) => {
  if (!e.target.matches('li')) {
    return;
  }
  const param = 'id' + e.target.dataset.param;
  theFunction(param);
});

<ul>
  <li data-param="1">name1</li>
  <li data-param="2">name2</li>
  <li data-param="3">name3</li>
</ul>

Обратите внимание, как атрибуты onclick были заменены атрибутами data-param.