Javascript 获得“点击”元素 addEventListener答案

【问题标题】：Javascript get "clicked" element addEventListenerJavascript 获得“点击”元素 addEventListener
【发布时间】：2022-01-21 02:35:29
【问题描述】：

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

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

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

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

【问题讨论】：

你能说得清楚一点吗？听起来您想了解事件冒泡但不完全确定。
什么？你想要被点击的元素吗？使用event.target 获取对被点击的实际元素的引用。
还有这个stackoverflow.com/questions/48239/…
如果所有答案都不起作用，或者您想要别的东西，请告诉我，以便我提供帮助
是的，当我单击跨度时，我似乎无法获取跨度 ID

标签： javascript

【解决方案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>

【讨论】：

@Teemu, event 是绑定到 js 中的处理程序的默认对象
@Teemu，我可能错了，但我认为event 就像arguments 一样，您无需传入即可访问它
不是。但在较旧的 IE 中，它是一个全局对象。
不是，我在控制台上看到“ReferenceError: event is not defined”。现在它起作用了。 - 对不起，我忘了，Chrome 也实现了全局 event，但它不是任何标准的一部分。我在FF，这给出了错误
这正是我所需要的。谢谢:)

【解决方案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
  }
});

【讨论】：

【解决方案3】：

Adam 的回答是正确的，省去了很多麻烦。然而，有一个更好和最简单的方法来实现这一点。请检查此answer

使用 Event.currentTarget，它是这样的：

<ul>
  <li class="list_item" data-mydata="hello there!">
    <img src="..." alt="" width="50", height="50">
  </li>
  <li class="list_item" data-mydata="hello world">
    <img src="..." alt="" width="50", height="50">
  </li>
</ul>

<script>
  const items = document.querySelectorAll(".list_item");
  items.forEach(node => {
    node.addEventListener("click", e => {
      let myvalue = e.currentTarget.dataset.mydata;
      console.log(myvalue); //hello there! || hello world It depends on which element the user has clicked
    })
  })
</script>

希望对你有用

【讨论】：