如何在JavaScript中编写单个函数，无需显式使用元素类名/ID处理任意数量按钮的点击逻辑

没问题，这正是**事件委托（Event Delegation）**的拿手场景！它能完美解决你不想重复绑定事件的痛点，不管现有还是新增的按钮，都能自动触发逻辑。

核心思路 #

事件委托利用DOM的事件冒泡特性：我们把点击事件绑定到一个稳定的父元素（比如按钮的容器，甚至document），而非每个按钮本身。当点击按钮时，事件会冒泡到父元素，父元素再判断点击目标是不是我们要处理的按钮，是的话就执行对应逻辑。这样不管后续新增多少按钮，只要符合规则，都会自动被处理。

具体实现代码 #

首先，假设你的按钮都放在一个共同容器里（比如<div class="button-container">），可以这么写：

// 绑定事件到父容器，监听所有.btn-primary按钮的点击
$('.button-container').on('click', '.btn-primary', function() {
  buttonVal(this);
});

// 优化后的处理函数（推荐用.val()更准确）
function buttonVal(ele) {
  // 用.val()获取input实时值，代替.attr('value')的初始属性值
  var currentVal = +$(ele).val();
  // 执行逻辑：0→1→2→点击重置为0
  $(ele).val(currentVal > 2 ? 0 : currentVal + 1);
}

如果没有明确的父容器，也可以直接绑定到document（虽然性能略逊，但简单直接）：

$(document).on('click', '.btn-primary', function() {
  buttonVal(this);
});

为什么这能解决问题？ #

• 不管你新增多少个带.btn-primary类的按钮，它们的点击事件都会被父容器捕获并触发逻辑，完全不用修改JavaScript代码。
• 替换.attr('value')为.val()是因为，.attr('value')取的是元素初始的HTML属性值，而.val()取的是input当前的实时值，逻辑更准确。

测试一下 #

现在随便新增按钮：

<input class="btn btn-primary button5" type="button" value="0">
<input class="btn btn-primary button6" type="button" value="0">

点击这些新按钮，它们会自动执行加1/重置的逻辑，完全不需要额外绑定！

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