点击事件仅最后一个div生效，如何为每个div绑定独立点击函数？

这个问题我太熟了！你遇到的是JavaScript循环绑定事件时常见的闭包/变量作用域陷阱——看起来你应该是用普通的for循环来给这些带.es类的<rect>元素（你说的div应该是口误啦）绑定点击事件的对吧？循环里的变量是共享的，当点击事件触发时，循环已经执行完毕，所有回调函数都会指向最后一个元素。

下面给你几种靠谱的解决办法，按推荐程度排序：

方案一：使用事件委托（最推荐） #

如果你的元素都是同一个父容器（比如这个<svg>），事件委托是最优解——不需要给每个元素单独绑定事件，只给父元素绑定一次，利用事件冒泡来处理。这种方式不仅解决了你的问题，还更高效，哪怕后续动态添加新的.es元素，也能自动绑定事件。

const svg = document.querySelector('.centerization');
svg.addEventListener('click', function(e) {
  // 确认点击的是目标元素
  if (e.target.classList.contains('es')) {
    // 这里写你要执行的函数，比如修改颜色
    e.target.setAttribute('fill', 'red');
    console.log('点击了:', e.target);
  }
});

方案二：用let声明循环变量（ES6+） #

如果你坚持给每个元素单独绑定，在for循环里用let代替var声明变量，因为let有块级作用域，每次循环都会创建一个新的变量绑定，这样每个回调函数都会捕获到当前循环的元素。

const elements = document.querySelectorAll('.es');
for (let i = 0; i < elements.length; i++) {
  const el = elements[i];
  el.addEventListener('click', function() {
    el.setAttribute('fill', 'green');
    console.log('点击了第', i+1, '个元素');
  });
}

方案三：使用forEach遍历 #

forEach的回调函数会为每个元素创建独立的作用域，天然避免了变量共享的问题，代码也更简洁：

const elements = document.querySelectorAll('.es');
elements.forEach(function(el, index) {
  el.addEventListener('click', function() {
    el.setAttribute('fill', 'orange');
    console.log('点击了第', index+1, '个元素');
  });
});

方案四：闭包捕获变量（兼容旧环境） #

如果需要兼容ES6之前的环境，可以用立即执行函数表达式（IIFE）创建闭包，把每个元素作为参数传递进去，强制捕获当前循环的元素：

const elements = document.querySelectorAll('.es');
for (var i = 0; i < elements.length; i++) {
  (function(el, idx) {
    el.addEventListener('click', function() {
      el.setAttribute('fill', 'purple');
      console.log('点击了第', idx+1, '个元素');
    });
  })(elements[i], i);
}

你可以根据自己的项目环境和需求选择合适的方案，个人最推荐事件委托，尤其是元素数量较多或者有动态添加元素的场景~

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