Javascript 获得“点击”元素 addEventListener

Posted 2023-03-24

【中文标题】Javascript 获得“点击”元素 addEventListener

【英文标题】：Javascript get "clicked" element addEventListener

【发布时间】：2022-01-21 02:35:29

【问题描述】：

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

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

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

JS

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

【问题讨论】：

你能说得清楚一点吗？听起来您想了解事件冒泡但不完全确定。

什么？你想要被点击的元素吗？使用event.target 获取对被点击的实际元素的引用。

还有这个***.com/questions/48239/…

如果所有答案都不起作用，或者您想要别的东西，请告诉我，以便我提供帮助

是的，当我单击跨度时，我似乎无法获取跨度 ID

【参考方案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="..."  , >
  </li>
  <li class="list_item" data-mydata="hello world">
    <img src="..."  , >
  </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>

希望对你有用