今天有位同學遇到了一個關于循環內綁定對象事件奇怪的問題，通過我在 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>