如何将重复的JavaScript点击事件代码精简为单个函数？

你当前的点击事件代码存在大量重复逻辑，可以通过以下几种方式精简为通用逻辑：

原始重复代码 #

btnA.addEventListener('click', function() {
    console.log("Answer choice: A")
    answerSelected = choiceA.textContent;
    checkAnswer(answerSelected);
})
btnB.addEventListener('click', function() {
    console.log("Answer choice: B")
    answerSelected = choiceB.textContent;
    checkAnswer(answerSelected);
})
btnC.addEventListener('click', function() {
    console.log("Answer choice: C")
    answerSelected = choiceC.textContent;
    checkAnswer(answerSelected);
})
btnD.addEventListener('click', function() {
    console.log("Answer choice: D")
    answerSelected = choiceD.textContent;
    checkAnswer(answerSelected);
})

方法一：数组批量绑定事件 #

把按钮、对应选项元素和标识整理成数组，通过循环复用同一个处理函数：

// 整理选项关联数据
const answerItems = [
  { btn: btnA, choiceEl: choiceA, label: 'A' },
  { btn: btnB, choiceEl: choiceB, label: 'B' },
  { btn: btnC, choiceEl: choiceC, label: 'C' },
  { btn: btnD, choiceEl: choiceD, label: 'D' }
];

// 通用点击处理函数
function handleChoiceClick(item) {
  return function() {
    console.log(`Answer choice: ${item.label}`);
    const answerSelected = item.choiceEl.textContent;
    checkAnswer(answerSelected);
  };
}

// 循环绑定事件
answerItems.forEach(item => {
  item.btn.addEventListener('click', handleChoiceClick(item));
});

方法二：事件委托（更推荐） #

给所有选项按钮的父容器绑定单个事件，通过事件对象判断点击目标，这种方式新增选项时无需修改绑定代码：

// 假设所有选项按钮都在id为"answer-container"的父容器内
const answerContainer = document.getElementById('answer-container');

answerContainer.addEventListener('click', function(e) {
  // 只处理带指定类名的按钮（需给按钮添加answer-btn类）
  if (!e.target.classList.contains('answer-btn')) return;
  
  // 从按钮的data属性获取标识（需给按钮添加data-label="A/B/C/D"）
  const label = e.target.dataset.label;
  // 根据标识找到对应的选项文本元素
  const choiceEl = document.getElementById(`choice${label}`);
  
  console.log(`Answer choice: ${label}`);
  const answerSelected = choiceEl.textContent;
  checkAnswer(answerSelected);
});

使用这种方式需要给按钮补充两个基础设置：

• 给所有选项按钮添加统一类名（如answer-btn）
• 给每个按钮添加data-label属性，值为对应选项标识（如data-label="A"）

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