儿童事件监听器

Question

说我有一个列表中的子列表，并且想要在单击列表中的一个子列表时执行操作。

<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来获取孩子的数组，但是在获取数组之后如何在事件监听器中注册他们？

Answer 1

您可以简单地执行document.querySelectorAll("li");，然后为每个对象创建一个事件侦听器。

Answer 2

一种方法是在循环中调用addEventListener：

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获取被单击的特定元素。

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>

Answer 3

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>