页面按钮点击事件绑定失败求助：点击按钮无Alert响应

原代码错误分析 #

第一段代码问题 #

document.querySelectorAll("button")返回的是所有button元素组成的NodeList集合，而e.target是单个DOM元素，集合与单个元素无法全等匹配，因此条件永远不成立，不会触发alert。

第二段代码问题 #

1. getElementsByClassName('button')未获取到目标按钮：页面中“Verset Aléatoire”按钮的类名是btn btn-primary，并非button，所以这个方法返回空集合，循环根本不会执行。
2. 循环内重复调用document.querySelectorAll("button")属于冗余操作，且逻辑上没必要遍历所有button来匹配目标。

正确实现方案 #

方案1：匹配所有button元素（事件委托） #

利用matches()方法直接判断点击目标是否为button元素，写法简洁高效：

document.addEventListener('click', function(e) {
  if (e.target.matches('button')) {
    alert('button');
  }
}, false);

方案2：精确匹配“Verset Aléatoire”按钮 #

该按钮有唯一IDrandomVerse，可以直接通过ID匹配，避免影响其他按钮：

document.addEventListener('click', function(e) {
  if (e.target.id === 'randomVerse') {
    alert('button');
  }
}, false);

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