Почему не работает делегирование?

Question

[Reaktor86]

Изучаю делегирование в JS. Нашел статью, где подробно все описывается, и есть код-пример. В примере всё отлично работает: https://codesandbox.io/s/event-delegation-example-...

Скопировал пример, адаптировал под свою задачу. При наводке на className он ругается на "невычисляемую переменную".

let calc = document.querySelector(".calc");

calc.addEventListener('click', function (event) {
if (event.target.className === 'button') {
console.log('Click!');
}
});



Почему у меня не работает?

Comments

[0xD34F]

3.8

Answer 1

[Stalker_RED]

условие className === 'button' не сработает, потому что там не 'button', а 'button num3' или типа того.

Проверяйте через classList.contains() или, еще лучше, через event.target.closest('button') - это сработает даже если внутри кнопки будут иконки, например, и клик попадет в них.

const calc = document.querySelector('.calc');
calc.addEventListener('click', calcClickHandler);

function calcClickHandler(event) {
  const button = event.target.closest('button');
  if (button) {
    console.log('Click!', button);
  }
}

И вместо классов действиями, типа minus, plus, я бы порекомендовал использовать дата атрибуты.