问题是闭包，因为 JS 没有块作用域（只有函数作用域）i并不是你想的那样，因为事件函数创建了另一个作用域，所以当你使用i它时，它已经是for循环中的最新值。您需要保留 的值i。

使用 IIFE：

for (var i=0; i<names.length; i++) {
  (function(i) {
    // use i here
  }(i));
}

使用forEach：

names.forEach(function( v,i ) {
  // i can be used anywhere in this scope
});

正如已经指出的，问题与闭包和变量范围有关。确保传递正确值的一种方法是编写另一个返回所需函数的函数，将变量保存在正确的范围内。提琴手

var names = ['button_id_0', 'button_id_1', 'button_id_2'];

function getClickFunction(a, b, c) {
  return function () {
    doMouseClick(a, b, c)
  }
}
for (var i = 0; i < names.length; i++) {
  document.getElementById(names[i]).addEventListener("click", getClickFunction(i, "Dog", "Cat"), false);
}

并举例说明您可以使用对象执行此操作的一种方法：

var names = ['button_id_0', 'button_id_1', 'button_id_2'];

function Button(id, number) {
  var self = this;
  this.number = number;
  this.element = document.getElementById(id);
  this.click = function() {
    alert('My number is ' + self.number);
  }
  this.element.addEventListener('click', this.click, false);
}
for (var i = 0; i < names.length; i++) {
  new Button(names[i], i);
}

或略有不同：

function Button(id, number) {
  var element = document.getElementById(id);
  function click() {
    alert('My number is ' + number);
  }
  element.addEventListener('click', click, false);
}
for (var i = 0; i < names.length; i++) {
  new Button(names[i], i);
}

这是因为关闭。

看看这个：https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Closures#Creating_closures_in_loops_A_common_mistake

示例代码和你的代码本质上是一样的，对于不知道“闭包”的人来说，这是一个常见的错误。

简单来说，当你创建一个处理函数时，它不仅会访问i外部环境中的变量，还会“记住” i。

因此，当处理程序被调用时，它将使用 ，i但变量i现在是，在 for 循环之后，2。

我自己已经为这个问题苦苦挣扎了几个小时，现在我刚刚设法解决了它。这是我的解决方案，使用函数构造函数：

function doMouseClickConstructor(peram1, peram2, peram3){
    return new Function('alert("doMouseClick() called AND peram1 = ' + peram1 + ' AND peram2 = ' + peram2 + ' AND peram3 = ' + peram3 + ');');
}

for (var i=0; i<names.length; i++){
    document.getElementById(names[i]).addEventListener("click", doMouseClickConstructor(i,"dog","cat"));
};

注意：我还没有真正测试过这段代码。然而，我已经测试了这个代码笔，它可以完成所有重要的事情，所以如果上面的代码不起作用，我可能只是犯了一些拼写错误。这个概念应该仍然有效。

快乐编码！

在 javascript 中，一切都是全局的。它正在调用在i循环后设置为 3的变量……如果i在循环后设置为 1000，那么您将看到每个方法调用产生 1000 for i。

如果你想保持状态，那么你应该使用对象。让对象具有分配给 click 方法的回调方法。

你提到这样做是为了事件冒泡……为了停止事件冒泡，你真的不需要那个，因为它内置于语言中。如果你确实想防止事件冒泡，那么你应该使用传递给回调stopPropagation()的event对象的方法。

function doStuff(event) {
    //Do things
    //stop bubbling
    event.stopPropagation();
}