Javascript 使用for循环设置事件处理程序

我在JSFIDLE上乱搞javascript，遇到了一个奇怪的问题。我似乎不明白为什么无法通过for循环设置

onclick

事件处理程序：

html:

<table border="1" cellspacing="1" width="500">
    <tr id="headerRow">
        <td>Header1</td>
        <td>Header2</td>
        <td>Header3</td>
        <td>Header4</td>
    </tr>
    <tr>
        <td>books</td>
        <td>red</td>
        <td>peas</td>
        <td>321</td>
    </tr>
    <tr>
        <td>tapes</td>
        <td>blue</td>
        <td>jello</td>
        <td>654</td>
    </tr>
</table>

校长1
校长2
校长3
校长4
书
红色
豌豆
321
磁带
蓝色
果冻
654

在DOM就绪中执行的js：

var arr = document.getElementById('headerRow')
    .getElementsByTagName("td");

// Why does this work??
/*arr[0].onclick = function() { alert(arr[0].innerHTML); };
arr[1].onclick = function() { alert(arr[1].innerHTML); };
arr[2].onclick = function() { alert(arr[2].innerHTML); };
arr[3].onclick = function() { alert(arr[3].innerHTML); };
*/

//But this doesn't????
for(var i = 0; i < arr.length; i++) {
    arr[i].onclick = function() { alert(arr[i].innerHTML); };
}

var arr=document.getElementById（'headerRow'）
.getElementsByTagName（“td”）；
//为什么这个工作？？
/*arr[0].onclick=function（）{alert（arr[0].innerHTML）；}；
arr[1].onclick=function（）{alert（arr[1].innerHTML）；}；
arr[2].onclick=function（）{alert（arr[2].innerHTML）；}；
arr[3].onclick=function（）{alert（arr[3].innerHTML）；}；
*/
//但这不是？？？？
对于（变量i=0；i

---

i

不会像您预期的那样包含“当前索引”，而是最后一个值

i

是，即

arr.length

一个快速的解决办法就是这样做

for(var i = 0; i < arr.length; i++) {
    (function(_i){
        arr[_i].onclick = function() { alert(arr[_i].innerHTML); };
    })(i);
}

for（变量i=0；i

---

它的作用是在执行语句的闭包内捕获新变量

\u i

中的

i

的当前值，因此它将保持不变，并且是每次调用onclick处理程序时所期望的值。

i

不会像预期的那样包含“当前索引”，但是最后一个值

i

是，即

arr.length

一个快速的解决办法就是这样做

for(var i = 0; i < arr.length; i++) {
    (function(_i){
        arr[_i].onclick = function() { alert(arr[_i].innerHTML); };
    })(i);
}

for（变量i=0；i

---

它所做的是在正在执行的语句的闭包中捕获新变量

\u i

中的

i

的当前值，因此它将保持不变，并且是每次调用onclick处理程序时所期望的值。

您需要闭包，否则

arr[i]

在另一个作用域中执行并爆炸

for(var i = 0; i < arr.length; i++) {

    arr[i].onclick = function(text) { 
        return function () {
            alert(text); 
        };
    }(arr[i].innerHTML);
}

for（变量i=0；i

---

您需要一个闭包，否则，

arr[i]

将在另一个作用域中执行并爆炸

for(var i = 0; i < arr.length; i++) {

    arr[i].onclick = function(text) { 
        return function () {
            alert(text); 
        };
    }(arr[i].innerHTML);
}

for（变量i=0；i

---

这是一个常见的错误

i

是在for循环中递增的全局变量。当循环结束时，i将等于4。然后在click handler函数中，您试图显示

arr[i].innerHTML

，它现在是

arr[4].innerHTML

arr[4]

显然不存在，因此会出现错误

---

为了便于修复，请将

警报（arr[i].innerHTML）

更改为

警报（this.innerHTML）

在click handler函数的上下文中，此

将引用

元素。

这是一个常见错误

i

是在for循环中递增的全局变量。当循环结束时，i将等于4。然后在click handler函数中，您试图显示

arr[i].innerHTML

，它现在是

arr[4].innerHTML

arr[4]

显然不存在，因此会出现错误

---

为了便于修复，请将

警报（arr[i].innerHTML）

更改为

警报（this.innerHTML）

在click handler函数的上下文中，此

将引用

元素。

认为这与您要查找的内容相同吗？你觉得这和你要找的一样吗？很好，谢谢。有道理。我必须对“闭包”更友好，谢谢。有道理。我必须对“闭包”更友好一些。。谢谢，很有趣。。非常感谢。