诡异的自动添加事件问题

<table border="0" cellspacing="0" cellpadding="1" width="250px" nowrap id="picquere">
        <tr>
            <td>
                <img src="http://home.blueidea.com/attachment/201101/18/404806_12953320658Qp4_t.jpg"/>
            </td>
            <td>
                <img src="http://home.blueidea.com/attachment/201101/10/264428_1294657656AU3R_t.png" />
            </td>
            <td>
                <img src="http://home.blueidea.com/attachment/201101/12/196894_1294825187d4Hi_t.jpg"/>
            </td>
            <td>
                <img src="http://home.blueidea.com/attachment/201101/18/404806_1295333148ZxPE_t.jpg"/>
            </td>
            <td>
                <img src="http://home.blueidea.com/attachment/201101/18/404806_1295333402p2Lz_t.jpg"/>
            </td>
        </tr>
    </table>
</body><script>window.onload=function()
{
    var obj=document.getElementById("picquere");
    var objlist=obj.getElementsByTagName("img");    for(var i=0;i<objlist.length;i++)
    {
        objlist[i].onmouseover=function(){alert(i);};       //这里诡异，为每一个img对象添加的居然都是alert(5)
    }
}
</script>
添加时间的代码居然objlist[i].onmouseover=function(){alert(i);}; 为每一个img对象添加的居然都是alert(5)，怎么回事，不好理解

解决方案 »

  1.   


    window.onload=function()
    {
        var obj=document.getElementById("picquere");
        var objlist=obj.getElementsByTagName("img");    for(var i=0;i<objlist.length;i++)
        {

    (function (x) {
    objlist[x].onmouseover=function(){alert(x);};
    })(i)

        }
    }查查闭包
      

  2.   

    i的作用域是整个onload函数内部。
    这个算是比较常见的了。
      

  3.   

    i的作用域是整个onload函数内部。objlist的作用域不也是onload内部吗？
      

  4.   

    搜闭包。
    for的同时，i++了，并且给objlist[i]添加事件了。
    所以每个objlist都有事件。
    但是，objlist[i]在mouseover的时候弹出来的i的时候又回到onload里面去找i了，这个时候i已经变成最大值了。
    其他知识网上找吧，《javascript权威指南》上面对这个解释的挺好的，建议资金允许的话买本看看。
      

  5.   

    我是这么理解的： 
    页面加载的时候，对这5个img都加了个onmouseover事件 alert（i）；但是此时并没有触发这个事件。。但是i却在++一直加到了5  根据闭包的意思理解，就是这个i并没有被GC处理掉，依然在内存里面。。所以，每个都是5了请高手分析下看了半天还是不能深刻理解原理