如何在JavaScript中使用循环生成事件处理程序？

Question

例如，我有10个标签由AJAX响应生成：

<a href="#" id="b1">b1</a>
<a href="#" id="b2">b2</a>
<a href="#" id="b3">b3</a>
<a href="#" id="b4">b4</a>
<a href="#" id="b5">b5</a>
<a href="#" id="b6">b6</a>
<a href="#" id="b7">b7</a>
<a href="#" id="b8">b8</a>
<a href="#" id="b9">b9</a>
<a href="#" id="b10">b10</a>

我需要通过循环为它们中的每一个分配onclick事件：

for(i=1; i<11; i++) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    }
}

这段代码无法正常工作，它只将onclick分配给最后一个a标签并弹出"11"。我该如何使其正常工作？我不想使用jQuery。

- Caballero

---

你应该调用 attachEvent / addEventListener（虽然它们不能解决你的问题） - SLaks

@SLaks 为什么 attachEvent/addEventListener 比 element.onclick 更合适？ - Micah Henning

@MicahHenning：允许您拥有多个处理程序。 - SLaks

@SLaks 哦，好的观点。谢谢。 - Micah Henning

Answer 1

你所有的处理程序都共享同一个i变量。

你需要把每个处理程序放到一个单独的函数中，该函数以i作为参数，这样每个处理程序都会有自己的变量:

function handleElement(i) {
    document.getElementById("b"+i).onclick=function() {
        alert(i);
    };
}

for(i=1; i<11; i++) 
    handleElement(i);

- SLaks

---

test.html:11 抛出未捕获的 TypeError 错误：无法设置 null 的 onclick 属性。 - sabin maharjan

Answer 2

你需要的是闭包：

for(i=1; i<11; i++) {
    (function(i) {
        document.getElementById("b"+i).onclick=function() {
            alert(i);
        };
    })(i);
}

- Kevin

---

我认为Caballero有一个不想要的闭包，他们想要一个闭包破坏器来强制立即评估i。这就是你的自执行函数所做的事情。 - mu is too short

闭包/非闭包...我不在乎！这个匿名/自调用的解决方案真是太美妙了 :) 我会选择这个。 - Nick

比拥有单独的函数更加优雅。 - Micah Henning

Answer 3

在解决这个问题时，有两种使用闭包的方式。其思想是为每次迭代创建一个作用域，并对“i”变量进行快照，以供事件处理程序使用。

解决方案＃1（正如Kevin所提到的）：

for(i=1; i<11; i++) {
    (function(num) {

       document.getElementById("b"+num).addEventListener('click', function() {
            alert(num);
       });

    })(i);
}

解决方案 #2：

for (i=1; i<11; i++) {
    document.getElementById("b"+i).addEventListener('click', (function(){
        var num = i;
        return function() {
            alert(num);
        }
    })());
}

- Marisev