活动 handling/Capturing

Question

我想在 Javascript 中附加一个事件侦听器到 "ul" html 标签，这样当我点击任何 "li" 时，警报将显示值对应的 "li":

<ul>
    <li>A<li/>
    <li>B<li/>
    <li>C<li/>
</ul>

如果点击 A，它应该提醒 A，B 和 C 也一样

Answer 1

var list = document.querySelector("#list");
list.addEventListener("click", function(ev) {
  if (ev.target !== list) console.log(ev.target.textContent);
  // console is easier to test than alert(ev.target.textContent);
});

<ul id="list">
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>

Answer 2

document.querySelectorAll('li')
  .forEach(item =>
    item.addEventListener('click',
      () => alert('Item clicked')
    )
  );

li {
  cursor: pointer;
}

li:hover {
  background: lightgrey;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

您必须循环遍历列表中的所有 <li/> 个元素并向其附加 eventListener。

查看代码示例以了解其工作原理。

Answer 3

获取所有 li nodes 并在每个 nodes 上添加 click events .

var lis =  document.getElementById("div").getElementsByTagName("li")
for(var i=0;i<lis.length;i++){
 lis[i].addEventListener('click', function(e){
      alert(e.target.textContent);
   })

}

// As if you want to have single click event on ul itself

document.getElementById("ul").addEventListener('click', function(e){
      alert(e.target.textContent);
   })

ul li {
  background: #cce5ff;
  margin: 5px;
  cursor:pointer;
}

<div id="div">
<ul >
  <li>A</li>
  <li>B</li>
  <li>C</li>
</ul>
</div>

 <p> As if you want to have single click event on ul itself</p>
<hr>

<ul id="ul">
  <li>X</li>
  <li>Y</li>
  <li>Z</li>
</ul>

Answer 4

您可以 select ul by getElementById 并将其绑定到事件 onclick。检查 JSFiddle

活动 handling/Capturing

Event handling/Capturing

javascript

click

dom-events