如何避免JavaScript代码重复，实现多div事件统一处理？

核心思路 #

• 给两个目标div添加共同类名（比如form-container），实现批量元素选择
• 通过遍历批量绑定事件，或使用事件委托方式，消除重复代码
• 利用元素原有类名（myform1/myform2）或自定义data-*属性区分不同div的处理逻辑

示例代码 #

调整后的HTML（仅新增共同类，保留原有结构） #

<div class="myform1 form-container">
  <button>操作按钮1</button>
</div>
<div class="myform2 form-container">
  <button>操作按钮2</button>
</div>

方案1：批量绑定事件（适合固定数量的div） #

// 批量获取所有目标div
const formDivs = document.querySelectorAll('.form-container');

// 遍历绑定点击事件
formDivs.forEach(div => {
  div.addEventListener('click', function(e) {
    // 根据原有类名区分处理逻辑
    if (this.classList.contains('myform1')) {
      console.log('myform1区域触发点击');
      // 这里编写myform1的专属处理逻辑
    } else if (this.classList.contains('myform2')) {
      console.log('myform2区域触发点击');
      // 这里编写myform2的专属处理逻辑
    }

    // 若需处理按钮点击，可判断事件源
    if (e.target.tagName === 'BUTTON') {
      const divName = this.classList.contains('myform1') ? 'myform1' : 'myform2';
      console.log(`${divName}内的按钮被点击`);
    }
  });
});

方案2：事件委托（高效且支持动态新增div） #

// 绑定到父容器（推荐使用更接近的父元素，而非body）
document.querySelector('body').addEventListener('click', function(e) {
  // 找到触发事件的目标div
  const targetDiv = e.target.closest('.myform1, .myform2');
  if (!targetDiv) return;

  // 区分不同div的处理逻辑
  if (targetDiv.classList.contains('myform1')) {
    console.log('myform1区域触发点击');
    // myform1的处理逻辑
  } else {
    console.log('myform2区域触发点击');
    // myform2的处理逻辑
  }

  // 处理按钮点击事件
  if (e.target.tagName === 'BUTTON') {
    const divName = targetDiv.classList.contains('myform1') ? 'myform1' : 'myform2';
    console.log(`${divName}内的按钮被点击`);
  }
});

方案优势 #

• 消除重复代码，后续维护更便捷
• 事件委托方案无需修改代码即可适配新增的同类型div
• 完全保留原有HTML结构，无需大幅调整

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