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

获取所有const { reject, flow, props, every, isEmpty } = _ const fn = reject(flow(props(['value', 'options']), every(isEmpty))) const arr = [{"type": "price","value": {"min": 0,"max": 170}}, {"type": "name","value": {}}, {"type": "volume","options": [1,2]}] const result = fn(arr) console.log(result)并在每个<script src='https://cdn.jsdelivr.net/g/lodash@4(lodash.min.js+lodash.fp.min.js)'></script>上添加li nodes

click events

nodes

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);
   })

Answer 3

您可以通过getElementById选择ul并将其绑定到事件onclick。检查 JSFiddle

Answer 4

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附加到它们。

请参阅代码示例以了解其工作原理。

事件处理/捕获

4 个答案: