设置使用for循环[复制]事件处理程序(Setting event handlers using a

这个问题已经在这里有一个答案：

如何生成的事件处理程序在JavaScript中循环？ [重复] 3个答案

我是瞎搞与一些JavaScript上的jsfiddle，跑进一个奇怪的问题。我似乎无法找出为什么我不能设置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>

在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); };
}

http://jsfiddle.net/xzmMj/4/

Answer 1:

i将不包含在“当前索引”像您打算，而是最后的价值i了，也就是说arr.length

一个快速ñ肮脏的解决办法是做这样的事情

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

这样做是抓住了当前值i在一个新的变量_i你执行该语句的关闭范围内，所以它会呆在身边，成为你所期望每次你的onclick处理程序被调用时的值。

Answer 2:

需要闭合，否则arr[i]执行以交替的范围和鼓起。

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

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

http://jsfiddle.net/xzmMj/5/