Правильное использование addEventListener

Question

Помогите решить проблему с добавлением события при нажатии на элемент который создается в цикле. Как правильно это сделать?

      for(let i = 0; i < data.length; i++) {
        let tr = document.createElement('tr');
        tr.addEventListener('click', function() {
            alert('message');
        });
    
        for(let users in data[i]) {
            if (users !== 'company' && users !== 'address' ){
                let td = document.createElement('td');
    
                td.innerHTML = data[i][users];
                tr.append(td);
            }
            table.append(tr);
        }
        
      }

Answer 1

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

document.querySelectorAll('table').onclick = (e) => {
  const target = e.target // Где был клик?

  if (target.tagName !== 'TD') return // Не на TD? Тогда останавливаем скрипт.

  console.log('Клик был на ' + target) // Показываем TD, на который кликнули.
}

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

БЛОГ НА HUSL

Правильное использование addEventListener

Ответы (1 шт):