为数组生成的按钮添加eventListener遇问题，请求代码排查

嘿Peter，我帮你排查了代码里的问题，核心原因是这个：

document.getElementsByTagName('button')返回的是一个HTMLCollection（类数组的按钮元素集合），而不是单个DOM元素。.addEventListener()是单个DOM元素的专属方法，直接给集合调用这个方法会报错，因为集合本身没有这个方法。

下面给你几种可行的解决方案：

方案1：遍历所有按钮逐个添加监听 #

如果页面有多个按钮，需要遍历集合里的每个按钮，为它们分别绑定点击事件：

// 获取页面所有按钮的集合
const buttons = document.getElementsByTagName('button');
// 用for...of循环遍历集合
for (const btn of buttons) {
  btn.addEventListener('click', function() {
    alert('Hello World!');
  });
}

方案2：使用事件委托（推荐场景：按钮数量多或动态生成按钮） #

把事件监听绑定到按钮的父元素上，利用事件冒泡机制来处理点击，这样不管是现有按钮还是后续动态添加的按钮，都能触发事件：

// 这里绑定到body，你也可以换成按钮所在的具体父容器
document.body.addEventListener('click', function(e) {
  // 判断点击的目标元素是按钮
  if (e.target.tagName === 'BUTTON') {
    alert('Hello World!');
  }
});

方案3：如果页面只有一个按钮，直接获取单个元素 #

如果你的页面只有一个按钮，可以用querySelector直接拿到单个DOM元素，这样就能直接绑定事件：

document.querySelector('button').addEventListener('click', function() {
  alert('Hello World!');
});

内容的提问来源于stack exchange，提问作者Pete