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

135

16 апреля 2022, 20:40

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

let calc = document.querySelector(".calc");
calc.addEventListener('click', function (event) {
    if (event.target.className === 'button') {
        console.log('Click!');
    }
});
<div class="calc">
    <div class="screen">
        <p class="screen__p">2344
    </div>
    <div class="block">
        <button class="button back">&#8592;</button>
        <button class="button reset">C</button>
    </div>
    <div class="block block-wrap">
        <button class="button num7">7</button>
        <button class="button num8 pressed">8</button>
        <button class="button num9">9</button>
        <button class="button minus">-</button>
        <button class="button plus">+</button>
        <button class="button num4">4</button>
        <button class="button num5">5</button>
        <button class="button num6">6</button>
        <button class="button multiple">&times;</button>
        <button class="button divide">&divide;</button>
        <button class="button num1">1</button>
        <button class="button num2">2</button>
        <button class="button num3">3</button>
        <button class="button radical">&#8730;</button>
        <button class="button power">X<sup>y</sup></button>
    </div>
    <div class="block block3">
        <button class="button zero">0</button>
        <button class="button dot">.</button>
        <button class="button equally">=</button>
    </div>
</div>

Почему мой вариант не работает?

Answer 1

.className возвращает строку со всеми классами button zero и т.д. Она не будет равна button, но в тоже время подстрока button будет в ней. Просто проверьте, есть ли слово button в строке с помощью includes().

const calc = document.querySelector(".calc");
calc.addEventListener('click', function(event) {
  if (event.target.className == 'button') {
    console.log('Работает ===');
  }
  if (event.target.className.includes('button')) {
    console.log('Работает includes');
  }
});

<div class="calc">
  <button class="button class1">Нет</button>
  <button class="button class2">Нет</button>
  <button class="button">Да</button>
</div>

А еще лучше написать так: event.target.classList.contains('button').

Ваш код:

const calc = document.querySelector(".calc");
calc.addEventListener('click', function(event) {
  if (event.target.classList.contains('button')) {
    console.log('Click!');
  }
});

<div class="calc">
  <div class="screen">
    <p class="screen__p">2344
  </div>
  <div class="block">
    <button class="button back">&#8592;</button>
    <button class="button reset">C</button>
  </div>
  <div class="block block-wrap">
    <button class="button num7">7</button>
    <button class="button num8 pressed">8</button>
    <button class="button num9">9</button>
    <button class="button minus">-</button>
    <button class="button plus">+</button>
    <button class="button num4">4</button>
    <button class="button num5">5</button>
    <button class="button num6">6</button>
    <button class="button multiple">&times;</button>
    <button class="button divide">&divide;</button>
    <button class="button num1">1</button>
    <button class="button num2">2</button>
    <button class="button num3">3</button>
    <button class="button radical">&#8730;</button>
    <button class="button power">X<sup>y</sup></button>
  </div>
  <div class="block block3">
    <button class="button zero">0</button>
    <button class="button dot">.</button>
    <button class="button equally">=</button>
  </div>
</div>

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Где хранить service worker?

Загорелся идеей добавить service worker при помощи workbox в существующий проект на WordPress, но столкнулся с одной проблемой: где его расположить и как...

113

javascript