为何addEventListener无法像jQuery一样生效？原生JS按钮事件问题咨询

原生JS代码失效的核心原因 #

document.querySelector('.store-btn')只会返回第一个匹配该选择器的DOM元素，所以你只给页面中第一个生成的"구매"按钮绑定了点击事件，另外两个按钮完全没有绑定任何点击逻辑，自然点击后没有反应。

jQuery能正常工作的原因 #

jQuery的$('.store-btn')会返回页面中所有匹配该选择器的元素集合，调用.click()方法时，jQuery会自动遍历这个集合，给每个元素都绑定点击事件，因此三个按钮点击都能触发回调。

原生JS的修复方案 #

方案1：遍历所有按钮绑定事件

用document.querySelectorAll('.store-btn')获取全部按钮元素，再逐个绑定事件：

document.querySelectorAll('.store-btn').forEach(btn => {
  btn.addEventListener('click', function(e) {
    console.log(e.target)
  })
})

方案2：事件委托（更推荐）

利用事件冒泡机制，把事件绑定到父容器（比如.row），不管后续动态生成多少按钮，都能触发逻辑：

document.querySelector('.row').addEventListener('click', function(e) {
  // 确认点击的是目标按钮
  if (e.target.classList.contains('store-btn')) {
    console.log(e.target)
  }
})

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