今天有位同學(xué)遇到了一個關(guān)于循環(huán)內(nèi)綁定對象事件奇怪的問題，通過我在 Google上搜索后得到這是由于沒有對js級別變量完全理解所產(chǎn)生的問題。所以我覺得很有必要把這方面的知識記錄下來，避免再發(fā)生這樣的錯誤。
     同學(xué)的編碼如下：

 1<script>
 2//點擊圖片調(diào)用的方法
 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>

      這時奇怪的問題就出現(xiàn)了，點擊這三個圖片中的任何一個，彈出的數(shù)值都是4(也就是循環(huán)結(jié)束后的值)。按我們正常的理解應(yīng)該給每個圖片點擊時間中傳入的參數(shù)按順序來因該是1,2,3。
      下面我就來談?wù)勎医鉀Q這個問題的過程
       1.考慮到每回點擊顯示的都是i這個變量循環(huán)結(jié)束后的值，所以這個i變量的范圍一定不只限于循環(huán)內(nèi)，于是我在循環(huán)后面加入了alert(i)這條語句發(fā)現(xiàn)打印出來的是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>

       通過這段代碼我們發(fā)現(xiàn)，只要重復(fù)點擊任何一個按鈕都會從1開始逐漸增加，由此我們可以確認在onclick函數(shù)中沒有執(zhí)行k++,而是在觸發(fā)了onclick時間才會執(zhí)行k++.
        3.由上面我得到的結(jié)論傳給onclick函數(shù)內(nèi)的是變量引用，于是我寫了下面的代碼，才最終解決了問題

 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>