всплытие и перехват js

142
16 декабря 2020, 10:20

Скажите пожалуйста как сделать так, чтобы вместо event.target.id получать у "li" класс и индекс в коллекции

Вот пример кода :

const list = document.querySelector(".list"); 
list.addEventListener("click", event => { 
  let target =  event.target.id; 
  console.log(target); 
});
<div class="list"> 
  <div id="one" class="item">1</div> 
  <div id="two" class="item">2</div> 
  <div id="three" class="item">3</div> 
  <div id="four" class="item">4</div> 
</div>

Id тут стоят только для примера!

Answer 1

Причем здесь делегирования я не понял, по вопросу - найти класс и индекс можно вот так:

const list = document.querySelector(".list"); 
list.addEventListener("click", event => { 
  let t = event.target; 
  let i = [...list.querySelectorAll('*')].indexOf(t); 
  console.log(t.className, i); 
});
<div class="list"> 
  <div class="item">1</div> 
  <div class="item">2</div> 
  <div class="item">3</div> 
  <div class="item">4</div> 
</div>

READ ALSO
Печать и снимок объекта
javascript

Печать и снимок объекта

Есть объект с идентификаторомdiscussions и кнопка

 113
Как работает метод contains? [дубликат]
javascript

Как работает метод contains? [дубликат]

 112
Заменить %20 на пробел
javascript

Заменить %20 на пробел

Народ всем привет! Есть импут через который проходят поисковые запросы, когда в импут вбивается 1 слово поиск работает корректно но когда...

 120
Помогите с мобильным меню
javascript

Помогите с мобильным меню

возникла проблема с мобильным менюПри переходе на разные страницы сайта с ним проблем нет, но когда пытаешься перейти на якорь одной страницы...

 147