Есть ли оверхед/нагрузка на большое количество обработчиков событий?

Question

[MirKey]

Например есть массив из 200 значений который будет списком, к каждому элементу списка будет событие по клику.
Можно создать одну функцию обработчик на все кнопки, а можно обработчик на каждое событие.
Не знаю как работает окружение в JS.

Пример обработчика на каждое событие:

for (let i = 1; i <= 200; i++) {
    let div = document.createElement('div');
    div.innerText = 'Строка '+i;
    div.onclick = ()=> console.log("Нажата строка "+i)
    document.body.append(div);
}

Пример единого обработчика:

function evtClick(evt) {
    console.log("Нажата строка "+evt.target.idx);
}
for (let i = 1; i <= 200; i++) {
    let div = document.createElement('div');
    div.innerText = 'Строка '+i;
    div.idx = i;
    div.onclick = evtClick
    document.body.append(div);
}

Вопрос в том есть ли исследование (или где в доке почитать) создаёт ли нагрузку использование "обработчика на каждое событие"?

Answer 1

[Алексей Уколов]

Обработчиков у вас в любом случае 200 вешается.
Вся разница в том, что в первом случае они ссылаются на двести функций, а во втором на одну.
Создание функции требует определённых ресурсов, поэтому оверхед есть. Будет ли он заметным — это другой вопрос. Ответ на него зависит от того, что на самом деле в вашем коде происходит. На компьютере вы, скорее всего, разницы никогда не почувствуете, а вот на очень слабом телефоне при огромном количестве функций может начать тормозить.

P.S. Проще использовать делегирование в таких случаях.

Answer 2

[Алексей Ярков]

Чёт перебор получился. Можно немного проще: https://codepen.io/yarkovaleksei/pen/xxexQKg?edito...

const ul = document.createElement('ul');

for (let i = 0; i <= 200; i++) {
    let li = document.createElement('li');
    li.innerText = `Строка ${i + 1}`;
    li.setAttribute('data-index', i + 1);
    ul.append(li);
}

document.body.append(ul);

document
  .querySelector('ul')
  .addEventListener(
    'click',
    function(event) {
      if (!event.target.dataset?.index) {
        return;
      }
      
      console.log(`Клик на строку ${event.target.dataset.index}`);
    }
  );