javascript - 事件处理/捕获

Question

我想将纯 Javascript 的事件监听器附加到“ul”html 标记，这样当我单击任何“li”时，警报将显示相应“li”的值:

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

如果点击 A 它应该提醒 A ， B 和 C 也是如此

Answer 1

获取所有li节点并在每个节点上添加点击事件.

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>