Как добавить добавить класс элементу с помощью делегирования событий

Question

Когда пробую вывести текст в консоль при клике по li то всё работает

const menu = document.querySelector('.menu__list');
menu.addEventListener('click', (e) => {
  if (e.target.closest('.menu__item')) {
    console.log("it's worked");
  }
});

<ul class="menu__list">
  <li class="menu__item">1</li>
  <li class="menu__item">2</li>
  <li class="menu__item">3</li>
  <li class="menu__item">4</li>
</ul>

а вот когда пробую сменить класс то выдаёт ошибку

const menu = document.querySelector('.menu__list');
const item = document.querySelector('.menu__item');
menu.addEventListener('click', (e) => {
  if (e.target.closest('.menu__item')) {
    item.classList.toogle('active');
  }
});

<ul class="menu__list">
  <li class="menu__item">1</li>
  <li class="menu__item">2</li>
  <li class="menu__item">3</li>
  <li class="menu__item">4</li>
</ul>

Подскажите пожалуйста где я ошибаюсь

PS: Знаю что для этой задачи можно использовать циклы или же forEach но недавно узнал о делегировании событий и понял что этот подход оптимальней и ест меньше ресурсов оперативной памяти и поэтому пытаюсь им овладеть

Answer 1

const menu = document.querySelector('.menu__list');
menu.addEventListener('click', (e) => {
    if (e.target.closest('.menu__item')) {
        e.target.classList.toggle('active');
        console.log('it`s worked');
    }
});

 <ul class="menu__list">
         <li class="menu__item">1</li>
         <li class="menu__item">2</li>
         <li class="menu__item">3</li>
         <li class="menu__item">4</li>
      </ul>

БЛОГ НА HUSL

Как добавить добавить класс элементу с помощью делегирования событий

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