Каким образом поставить обработчик событий на все элементы блока с элементами partWithNav--ul--li?

Question

[Artem Haidarov]

Каким образом поставить обработчик событий на все элементы partWithNav--ul, чтобы при нажатии на какой то из элементов partWithNav--ul--li (их 5), менялся класс у backgroung-stripeOnTop, в зависимости от кнопки. У каждой кнопки есть функция которая будет добавлять свой класс(redBackgroundColor, toolsBackgroundColor, towerBackgroundColor, markBackgroundColor) backgroung-stripeOnTop.

Comments

[Ivan Ustûžanin]

и в чём проблема? обычный ul.addEventListener('click'), в обработчике которого через event.target.closest('li') искать нужный элемент

Answer 1

[UthvfyV]

пусть каждая кнопка задаёт свой неповторимый класс. Задайте классы допустим button1 button2 ... . И допустим button1 добавляет redBackgroundColor1 button2 redBackgroundColor2 ... Тогда надо указать что при добавлении redBackgroundColor1, удаляется redBackgroundColor2 Допустим

element.classList.add("redBackgroundColor1");
element.classList.remove("redBackgroundColor2");

Answer 2

[user134]

Один слушатель на ul с проверкой

[ul].addEventListener('click',(ev)=>{
  if(ev.target.nodeName !== "li") return;
    //Тут добавление классов если для каждой 
    //отдельной кнопки нужен свой клас их надо как-то
    //отличить можно через дата атрибут типа:
   if(ev.target.dataset.attribute==="value attribute"){
     //Что-то делаем
   }
   //Можно заменить if на switch case
}

Это если я правильно понимаю задание
делегирование событий