如何在JavaScript中获取被点击按钮的名称？

没问题，针对你这个有大量按钮的场景，我推荐用事件委托的方式来实现，既高效又能兼容动态添加的按钮，下面给你详细的实现方案：

方案一：事件委托（推荐） #

因为你有超过160个按钮，给每个按钮单独绑定事件会浪费内存，事件委托只需要给父元素甚至整个文档绑定一次事件，利用事件冒泡机制处理所有按钮的点击，性能更好，而且后续如果动态添加按钮也不用重新绑定事件。

HTML 结构示例 #

<!-- 第一个按钮容器 -->
<div class="button-group">
  <button class="shared-btn" id="btn-1" name="profile">按钮1</button>
  <button class="shared-btn" id="btn-2" name="settings">按钮2</button>
  <!-- 剩下79+个按钮... -->
</div>

<!-- 第二个按钮容器 -->
<div class="button-group">
  <button class="shared-btn" id="btn-82" name="dashboard">按钮82</button>
  <button class="shared-btn" id="btn-83" name="notifications">按钮83</button>
  <!-- 剩下79+个按钮... -->
</div>

JavaScript 实现 #

// 监听整个文档的点击事件，也可以换成监听两个div容器
document.addEventListener('click', function(e) {
  // 找到点击的元素中最近的带有shared-btn类的按钮
  const targetBtn = e.target.closest('.shared-btn');
  
  if (targetBtn) {
    // 弹出当前按钮的name属性值
    alert(targetBtn.name);
    // 也可以用getAttribute方法：alert(targetBtn.getAttribute('name'))
  }
});

这里用closest('.shared-btn')是为了避免按钮内部有子元素（比如图标、文本span）时，点击子元素无法触发正确的逻辑，这个方法会向上查找最近的符合条件的按钮元素，非常稳妥。

方案二：直接给每个按钮绑定事件（不推荐大量元素使用） #

如果你的按钮都是静态渲染的，不会动态添加，也可以用这个方法，但性能不如事件委托：

// 获取所有带有shared-btn类的按钮
const allButtons = document.querySelectorAll('.shared-btn');

// 遍历每个按钮，绑定点击事件
allButtons.forEach(button => {
  button.addEventListener('click', function() {
    // this指向当前被点击的按钮
    alert(this.name);
  });
});

这个方法的缺点是，每一个按钮都会生成一个事件处理函数，当按钮数量很多时会占用更多内存，而且如果后续通过JS动态添加新按钮，这些新按钮不会自动拥有点击事件，需要重新绑定。

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