为何Click事件监听器会触发前一张图片？猫点击器应用问题

嘿，我一眼就看出你遇到的问题了——切换猫图片后，点新猫居然旧猫的计数也跟着涨，这大概率是事件绑定重复叠加导致的！

问题根源分析 #

从你给出的cats对象结构来看，你应该是每次切换下拉菜单时，都会给显示猫图的DOM元素绑定一次点击事件，但却没移除之前绑定的旧事件。这样一来，每切换一次，就会多一层事件监听，点击图片时所有绑定过的事件处理函数都会执行，自然旧猫的计数也会跟着增加。

举个你可能踩坑的错误逻辑例子：

// 错误示例：每次切换都绑定新的匿名点击事件
catSelector.addEventListener('change', function(e) {
  const catKey = e.target.value;
  const cat = cats[catKey];
  catImageEl.src = cat[1];
  // 这里每次切换都会新增一个点击事件，旧的不会自动消失
  catImageEl.addEventListener('click', function() {
    cat[2]++;
    catCountEl.textContent = cat[2];
  });
});

两种可行的解决方案 #

方案1：移除旧事件后再绑定新事件

核心是把点击处理函数做成可引用的命名函数，每次切换猫时，先移除之前的事件监听，再绑定新的：

<!-- 先准备好基础HTML结构 -->
<select id="catSelector">
  <option value="cat1">Tiger</option>
  <option value="cat2">Puss</option>
</select>
<div id="catContainer">
  <h2 id="catName"></h2>
  <img id="catImage" src="" alt="Cat">
  <p>点击次数: <span id="catCount">0</span></p>
</div>

var cats = {
  cat1: ['Tiger', "https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426", 0],
  cat2: ['Puss', "https://lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496", 0]
};

// 获取DOM元素
const catSelector = document.getElementById('catSelector');
const catNameEl = document.getElementById('catName');
const catImageEl = document.getElementById('catImage');
const catCountEl = document.getElementById('catCount');

// 记录当前选中的猫key
let currentCatKey = 'cat1';

// 可复用的点击处理函数
function handleCatClick() {
  cats[currentCatKey][2]++;
  catCountEl.textContent = cats[currentCatKey][2];
}

// 渲染选中猫的信息
function renderCat(catKey) {
  const cat = cats[catKey];
  currentCatKey = catKey;
  catNameEl.textContent = cat[0];
  catImageEl.src = cat[1];
  catCountEl.textContent = cat[2];
  
  // 先移除旧事件，再绑定新事件
  catImageEl.removeEventListener('click', handleCatClick);
  catImageEl.addEventListener('click', handleCatClick);
}

// 下拉菜单切换事件
catSelector.addEventListener('change', function(e) {
  renderCat(e.target.value);
});

// 初始渲染第一只猫
renderCat('cat1');

方案2：用事件委托，只绑定一次事件

更优雅的方式是把点击事件绑定到猫的父容器上，利用事件冒泡机制判断点击的是猫图片，这样只需要绑定一次事件，彻底避免重复绑定的问题：

var cats = {
  cat1: ['Tiger', "https://lh3.ggpht.com/nlI91wYNCrjjNy5f-S3CmVehIBM4cprx-JFWOztLk7vFlhYuFR6YnxcT446AvxYg4Ab7M1Fy0twaOCWYcUk=s0#w=640&h=426", 0],
  cat2: ['Puss', "https://lh3.ggpht.com/kixazxoJ2ufl3ACj2I85Xsy-Rfog97BM75ZiLaX02KgeYramAEqlEHqPC3rKqdQj4C1VFnXXryadFs1J9A=s0#w=640&h=496", 0]
};

const catSelector = document.getElementById('catSelector');
const catNameEl = document.getElementById('catName');
const catImageEl = document.getElementById('catImage');
const catCountEl = document.getElementById('catCount');
const catContainer = document.getElementById('catContainer');

let currentCatKey = 'cat1';

// 只给容器绑定一次点击事件
catContainer.addEventListener('click', function(e) {
  // 确认点击的是猫图片
  if(e.target.id === 'catImage') {
    cats[currentCatKey][2]++;
    catCountEl.textContent = cats[currentCatKey][2];
  }
});

// 渲染猫信息的函数和之前一样
function renderCat(catKey) {
  const cat = cats[catKey];
  currentCatKey = catKey;
  catNameEl.textContent = cat[0];
  catImageEl.src = cat[1];
  catCountEl.textContent = cat[2];
}

catSelector.addEventListener('change', function(e) {
  renderCat(e.target.value);
});

renderCat('cat1');

两种方法都能解决你的问题，个人更推荐方案2，代码更简洁，也减少了DOM操作的开销~

内容的提问来源于stack exchange，提问作者Akash Kumar Seth