addEventListener点击事件重复绑定导致触发次数递增问题求助

问题代码 #

let chance20 = 60;

function lift20kg() {
   pickNumber();
   button1.addEventListener('click', function() {
      chance20 +=5;
      commentary.textContent = `Good lift! Now you got ${chance20}% chance to lift 20kg`;
      liftCommentary.textContent = 'Good Lift!';
      
      console.log(chance20);
   }))

问题现象 #

• 首次点击按钮，控制台输出65，符合预期；
• 二次点击，控制台输出70、75，单次点击触发两次逻辑；
• 三次点击，控制台输出80、85、90，触发三次逻辑，次数随点击递增。

核心原因 #

并非作用域问题，而是重复绑定事件监听器：每次调用lift20kg()函数，都会给button1新增一个点击事件处理函数。调用N次lift20kg后，按钮上会绑定N个监听器，单次点击就会触发N次逻辑。

解决方案 #

方案1：将事件绑定移出函数（推荐） #

把addEventListener放在lift20kg外部，仅绑定一次监听器：

let chance20 = 60;

// 仅绑定一次点击事件
button1.addEventListener('click', function() {
   chance20 +=5;
   commentary.textContent = `Good lift! Now you got ${chance20}% chance to lift 20kg`;
   liftCommentary.textContent = 'Good Lift!';
   
   console.log(chance20);
});

function lift20kg() {
   pickNumber();
}

方案2：抽离命名函数，绑定前移除旧监听器 #

若lift20kg必须被多次调用，可将点击逻辑抽成命名函数，每次绑定前先移除旧监听器：

let chance20 = 60;

function handleButtonClick() {
   chance20 +=5;
   commentary.textContent = `Good lift! Now you got ${chance20}% chance to lift 20kg`;
   liftCommentary.textContent = 'Good Lift!';
   
   console.log(chance20);
}

function lift20kg() {
   pickNumber();
   // 先移除旧监听器，再绑定（确保同一时刻只有一个监听器）
   button1.removeEventListener('click', handleButtonClick);
   button1.addEventListener('click', handleButtonClick);
}

方案3：事件委托（适配动态生成的按钮） #

如果button1是动态创建的元素，可将事件绑定到固定存在的父元素（如document），通过事件委托避免重复绑定：

let chance20 = 60;

// 绑定到父元素，通过事件源判断触发逻辑
document.addEventListener('click', function(e) {
   // 匹配button1（可根据实际选择器调整）
   if (e.target.matches('#button1')) {
      chance20 +=5;
      commentary.textContent = `Good lift! Now you got ${chance20}% chance to lift 20kg`;
      liftCommentary.textContent = 'Good Lift!';
      
      console.log(chance20);
   }
});

function lift20kg() {
   pickNumber();
}

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