今天有位同学遇到了一个关于循环内绑定对象事件奇怪的问题，通过我在 Google上搜索后得到这是由于没有对js级别变量完全理解所产生的问题。所以我觉得很有必要把这方面的知识记录下来，避免再发生这样的错误。
     同学的编码如下：

 1<script>
 2//点击图片调用的方法
 3function click(value)
 4{
 5  alert(value);
 6}
 7
 8for(var i=1;i<=3;i++)
 9{
10var img = document.createElement("IMG");
11img.id = "img"+i;
12//这是图片的路径
13img.src="d:/1.jpg";
14img.style.cursor="hand";    
15img.onclick = function(){
16  click(i);
17}
18document.body.appendChild(img);
19}
20</script>

      这时奇怪的问题就出现了，点击这三个图片中的任何一个，弹出的数值都是4(也就是循环结束后的值)。按我们正常的理解应该给每个图片点击时间中传入的参数按顺序来因该是1,2,3。
      下面我就来谈谈我解决这个问题的过程
       1.考虑到每回点击显示的都是i这个变量循环结束后的值，所以这个i变量的范围一定不只限于循环内，于是我在循环后面加入了alert(i)这条语句发现打印出来的是i而不是undefined.由此我们可以断定i是全局变量。
       2.第二步我写了下面代码

 1<HTML>
 2 <BODY>
 3  <script>
 4
 5      for(var i = 1; i <= 3;i++){
 6        var button = document.createElement("button");
 7        var k = 1;
 8        button.value=i;
 9        button.onclick=function(){
10           alert(k++);
11        }
12        document.body.appendChild(button);
13      }
14    </script>
15 </BODY>
16</HTML>

       通过这段代码我们发现，只要重复点击任何一个按钮都会从1开始逐渐增加，由此我们可以确认在onclick函数中没有执行k++,而是在触发了onclick时间才会执行k++.
        3.由上面我得到的结论传给onclick函数内的是变量引用，于是我写了下面的代码，才最终解决了问题

 1<HTML>
 2 <BODY>
 3<script>
 4    function mapping(element,value){
 5        element.onclick=function(){
 6        alert(value);
 7    }
 8    }
 9    for(var i = 1; i <= 3;i++){
10        var button = document.createElement("button");
11        mapping(button,i);
12        button.value=i;
13        document.body.appendChild(button);
14    }
15</script>
16 </BODY>
17</HTML>