如何为同class的多个按钮绑定函数？无需内联onclick

没问题，我来帮你搞定这个需求！其实不用内联onclick也能轻松拿到点击按钮的value，而且有两种常用的思路，我都给你详细说说：

这种方法的核心是把事件绑定到按钮的父元素上，利用浏览器的事件冒泡机制来处理点击。好处是不用循环遍历每个按钮，哪怕后续动态添加新的同class按钮，也能自动生效，性能更优。

举个实际的例子：

HTML结构 #

<div class="button-group">
  <button class="target-btn" value="apple">苹果</button>
  <button class="target-btn" value="banana">香蕉</button>
  <button class="target-btn" value="orange">橙子</button>
</div>

JavaScript代码 #

// 先定义你要使用的变量
let selectedValue;

// 获取按钮的父容器
const buttonGroup = document.querySelector('.button-group');

// 给父容器绑定点击事件
buttonGroup.addEventListener('click', function(e) {
  // 先判断点击的是不是我们目标按钮
  if (e.target.classList.contains('target-btn')) {
    // 把变量设置为被点击按钮的value
    selectedValue = e.target.value;
    console.log('当前选中的value:', selectedValue);
    // 这里可以添加你后续需要执行的逻辑
  }
});

如果你的按钮是固定不会动态新增的，也可以直接遍历所有按钮，给每个按钮单独绑定点击事件。这里的this关键字也能正常生效，只要你不用箭头函数定义事件回调就行。

JavaScript代码 #

// 获取所有目标按钮
const buttons = document.querySelectorAll('.target-btn');
let selectedValue;

// 遍历每个按钮，绑定点击事件
buttons.forEach(button => {
  button.addEventListener('click', function() {
    // 这里的this就指向被点击的那个按钮
    selectedValue = this.value;
    console.log('当前选中的value:', selectedValue);
    // 后续逻辑写在这里
  });
});

小提醒 #

要是你不小心用了箭头函数当回调，this就不会指向按钮了（箭头函数的this继承自外层作用域），这时候换成e.target.value也能拿到同样的结果，和方法一里的用法一致。

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