Слушатель событий для детей - PullRequest
Новая
       8

Слушатель событий для детей

1 голос
/ 05 марта 2020

Скажем, у меня есть список дочерних элементов в списке, и я хочу выполнить действие при нажатии одного из дочерних элементов списка. 

<ul id="list">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>         
</ul>

Я бы использовал document.getElementById ("list") .children для получения массива дочерних элементов, но как мне зарегистрировать их в прослушивателе событий после получения массива?

Ответы [ 3 ]

2 голосов
/ 05 марта 2020

Один из способов - позвонить addEventListener по телефону oop: 

Array.from(document.getElementById("list").children).forEach(c => c.addEventListener("click", e => console.log(`Clicked on ${e.currentTarget.id}`)));
<ul id="list">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>         
</ul>

Другим способом является добавление слушателя в контейнер. Событие всплывет, и вы можете использовать event.target, чтобы получить указанный элемент c, по которому щелкнули. 

document.getElementById("list").addEventListener("click", e => console.log(`Clicked on ${e.target.id}`));
<ul id="list">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>         
</ul>
1 голос
/ 05 марта 2020 

let AllLis = document.querySelectorAll("li");

AllLis.forEach( li => {
  li.addEventListener("click",()=>{
    li.innerHTML -= 1;
  })
})
li{
padding:1rem;
margin:.5rem
}
<ul id="list">
    <li id="item1">1</li>
    <li id="item2">2</li>
    <li id="item3">3</li>
    <li id="item4">4</li>         
</ul>
0 голосов
/ 05 марта 2020

Вы можете просто сделать document.querySelectorAll("li"); и затем создать прослушиватель событий для каждого из этих объектов.

...