如何在 Javascript 中使用循环生成事件处理程序？ [复制]答案

【问题标题】：How to generate event handlers with loop in Javascript? [duplicate]如何在 Javascript 中使用循环生成事件处理程序？ [复制]
【发布时间】：2011-06-26 23:20:20
【问题描述】：

例如，我有 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 分配给最后一个标签并警告“11”。我怎样才能让它工作？我不想使用 jQuery。

【问题讨论】：

你应该打电话给attachEvent / addEventListener（虽然他们不会解决你的问题）
@SLaks 为什么attachEvent/addEventListener 比element.onclick 更合适？
@MicahHenning：允许您拥有多个处理程序。
@SLaks 啊，好点。谢谢。

标签： javascript

【解决方案1】：

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

您需要将每个处理程序放入以i 作为参数的单独函数中，以便每个处理程序都有自己的变量：

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

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

【讨论】：

test.html:11 Uncaught TypeError: Cannot set property 'onclick' of null

【解决方案2】：

闭包就是你要找的东西：

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

【讨论】：

我想说 Caballero 有一个他们不想要的闭包，他们想要一个闭包破坏者来强制立即评估 i。这就是你的自动执行函数正在做的事情。
关闭/不关闭...我不在乎！这个匿名/自我调用的解决方案很漂亮:) 我会勾选这个。
比拥有一个单独的函数要优雅得多。

【解决方案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);
        }
    })());
}

【讨论】：