Javascript 获取“点击”元素 addEventListener

Question

我知道我可以获取个人 ID 的元素。

无论如何，我可以将一个侦听器附加到父 div 并传递被单击的单个跨度的 ID？

 <div id = "divId">
  <span id="one"></span>
  <span id="two"> </span>
 </div>

JS

 document.getElementById("two").addEventListener("click", someFunction);

原文由 Doc Holiday 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 event 对象并访问其 target 属性

 document.getElementById("divId").addEventListener("click", someFunction);

function someFunction(event) {
  console.log(event.target.id);
}

 <div id="divId">
  <span id="one">one</span>
  <span id="two"> two</span>
</div>

原文由 AmmarCSE 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果用户单击的节点是用户要测试的元素的子节点 e.target 将是一个不同的节点。现在检查这一点的明智方法是在文档级别监听并迭代路径（或使用一些委托库，其中有很多）：

向文档添加一个事件侦听器：

 const isOnId = (path,id) => path.some(element => element.id === id);

document.addEventListener('click',function(e) {
  if(isOnId(e.path,'two')) {
    //you clicked on or in element with an id two
  } else {
    //you clicked on something else
  }
});

原文由 Adam 发布，翻译遵循 CC BY-SA 4.0 许可协议