类和事件[重复]答案

【问题标题】：Classes And Events [duplicate]类和事件[重复]
【发布时间】：2021-06-05 21:46:50
【问题描述】：

使用 document.getElementByClassName 定义事件后，如何将事件添加到 HTML 类？

所以我有这个let pledgeHeader = document.getElementsByClassName("pledge-header");

当我尝试向它添加一个事件pledgeHeader.onclick = function(){this.style.display = "none"} 它什么也没做。如何使事件与类一起使用？

【问题讨论】：

pledgeHeader[0].onclick

标签： javascript

【解决方案1】：

document.getElementsByClassName 返回一个元素数组，而不仅仅是一个元素。您可以对结果执行forEach 并以这种方式添加处理程序：

let pledgeHeader = document.getElementsByClassName("pledge-header");

pledgeHeader.forEach(el => {
    el.onclick = function(){this.style.display = "none"}
}

或者，如果您知道该类只有一个元素，则可以使用pledgeHeader[0].onclick = ...。基本上是您已经拥有的，但使用 [0] 访问数组中的第一个元素。

更新

如果您知道您将只有一个“pledgeHeader”，为什么不提供该元素和id="pledgeHeader"，然后将您的代码更改为let pledgeHeader = document.getElementById("pledgeHeader")。

【讨论】：

【解决方案2】：

您可以遍历元素和每个元素的事件侦听器。不过，您应该使用document.querySelectorAll，除非您需要实时的HTMLCollection。

for(const el of document.querySelectorAll(".pledge-header")){
   el.addEventListener('click', function(e){
      this.style.display = 'none';
   });
}

如果只有一个元素或者只想要第一个元素，可以直接使用document.querySelector。

document.querySelector('.pledge-header').addEventListener('click', function(e){
    this.style.display = 'none';
});

【讨论】：