如何判断触发JavaScript的按钮？多按钮复用JS需求咨询

嘿，这个问题根本不用重复写代码就能解决！咱们有好几种简洁的方法可以识别触发事件的按钮，同时复用同一段逻辑，我给你详细说说：

方法1：批量绑定按钮，通过事件对象获取触发元素 #

首先可以给所有触发按钮加一个共同的类（比如modal-trigger），这样能一次性选中它们，然后循环绑定点击事件，在事件处理函数里通过this或者event.target就能拿到触发按钮的信息。

示例代码 #

HTML部分（给按钮添加共同类）

<button id="myBtn1" class="modal-trigger">按钮1</button>
<button id="myBtn2" class="modal-trigger">按钮2</button>
<button id="myBtn3" class="modal-trigger">按钮3</button>

<!-- 你的模态框div -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>模态框内容</p>
  </div>
</div>

JavaScript部分

// 获取模态框和所有触发按钮
const modal = document.getElementById('myModal');
const triggerButtons = document.querySelectorAll('.modal-trigger');

// 循环给每个按钮绑定点击事件
triggerButtons.forEach(button => {
  button.addEventListener('click', function(e) {
    // 获取触发按钮的ID（也可以用其他属性，比如data-*自定义属性）
    const clickedBtnId = this.id;
    console.log(`触发模态框的是：${clickedBtnId}`);
    
    // 打开模态框的核心逻辑
    modal.style.display = "block";
    
    // 如果需要根据不同按钮调整模态框内容，也很方便
    if (clickedBtnId === 'myBtn1') {
      modal.querySelector('.modal-content p').textContent = '这是按钮1触发的模态框';
    } else if (clickedBtnId === 'myBtn2') {
      modal.querySelector('.modal-content p').textContent = '这是按钮2触发的模态框';
    }
  });
});

方法2：事件委托（更灵活的方案） #

如果以后可能会动态新增按钮，事件委托会更合适——把点击事件绑定到按钮的父容器上，这样不管新增多少按钮，都不用重新绑定事件，只需要判断点击的元素是不是我们的触发按钮就行。

示例代码 #

HTML部分（按钮放在同一个父容器里）

<div id="buttonGroup">
  <button id="myBtn1" class="modal-trigger">按钮1</button>
  <button id="myBtn2" class="modal-trigger">按钮2</button>
  <button id="myBtn3" class="modal-trigger">按钮3</button>
</div>

<div id="myModal" class="modal">
  <!-- 模态框内容 -->
</div>

JavaScript部分

const modal = document.getElementById('myModal');
const buttonGroup = document.getElementById('buttonGroup');

// 给父容器绑定点击事件
buttonGroup.addEventListener('click', function(e) {
  // 检查点击的元素是否是触发按钮
  if (e.target.classList.contains('modal-trigger')) {
    const clickedBtnId = e.target.id;
    console.log(`触发模态框的是：${clickedBtnId}`);
    
    // 打开模态框逻辑
    modal.style.display = "block";
    
    // 按需调整内容
    // ...
  }
});

这两种方法都能让你只写一次核心逻辑，同时轻松识别是哪个按钮触发的事件，完全不用重复写代码～

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