为什么不能动态添加事件监听

如果我把FOR循环注释，使用其下面的四行就可以，为什么？<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件监听</title>
</head>
<body>
<table width="60%" border="0" cellpadding="0" cellspacing="1" align="center" bgcolor="#666666" id="table_1">
<tr bgcolor="#ffffff">
<td>0</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>
<script language="javascript">
function addEventHandler(target, type, func)
{
if (target.addEventListener)
{
target.addEventListener(type, func, false);
}
else if (target.attachEvent)
{
target.attachEvent("on" + type, func);
}
else
{
target["on" + type] = func;
}
}function Alert(v)
{
alert(v);
}var table = document.getElementById("table_1");
var td = table.getElementsByTagName("td");
for (var i = 0; i < td.length; i ++)
{
//alert(td.item(i).innerHTML);
addEventHandler(td.item(i), "click", function(){alert(i);})
}
//addEventHandler(td.item(0), "click", function(){alert(0);})
//addEventHandler(td.item(1), "click", function(){alert(1);})
//addEventHandler(td.item(2), "click", function(){alert(2);})
//addEventHandler(td.item(3), "click", function(){alert(3);})
</script>

解决方案 »

  1.   

    for 循环里的语句改成这样
        (function(n){
        addEventHandler(td.item(n), "click", function(){alert(n);})
        })(i);
      

  2.   

    因为你添加 事件监听器的 时候是 属于 “赋值” 操作，而不是 一个 “执行”过程所以 等 “执行”（事件触发）的时候， alert(i); 中的 i 变量 ，已经不是 当时“赋值”的那个i 了
      

  3.   

    1楼，你的代码我Ctrl+C,Ctrl+V了一下，经测试，结果正确，您能说明下原因吗？或者解说下。
    2楼解说的我不明白，呵呵。
      

  4.   

    闭包的问题for (var i = 0; i < td.length; i ++)
    {
        //alert(td.item(i).innerHTML);
        addEventHandler(td.item(i), "click", function(){alert(i);})
    }在绑定事件的时候，你的function(){alert(i);}中的i并不是特定的值，是一个引用。
    当你点击td的时候，才会取出i中的值，所以，弹出来的，已经是最后一个值了。
    你可以采用闭包来避免这个问题：
    for (var i = 0; i < td.length; i ++)
    {
    (function(m){
        //alert(td.item(i).innerHTML);
        addEventHandler(td.item(i), "click", function(){alert(i);})}(i);
    }增加了(function(){})();创建的闭包，以保证其作用域正确。