js循環綁定事件

首先看這段代碼：

<button id="0">0</button>
<button id="1">1</button>
<button id="2">2</button>
<script> 
$(function(){
    for (var i=0; i<=2; i++) {
        $("#" + i).on("click", function() {
            alert(i);
        });
    };
})
</script>

  這段代碼若是不仔細看的話會誤覺得三個按鈕點擊結果分別爲0，1，2。可是運行結果倒是3，3，3。

  咱們來分析一下代碼執行過程：前三遍循環分別給按鈕0，1，2綁定了alert(i)的事件，第四遍循環開始時i=3，不符合i<=2的條件，所以終止循環。這裏要注意的是，前三遍循環綁定的是alert(i)事件，而不是alert(0)，alert(1)，alert(2)，由於在綁定的過程當中on的事件處理函數裏的代碼並無運行，所以在觸發click事件以前並不知道i等於幾，代碼此時只認爲i是一個全局變量（實際上i的做用域爲最外層的function）。上面分析了，當循環結束時i等於3，所以3個按鈕點擊均爲alert(3)。

  可是在實際工做中咱們常常會遇到這種循環綁定事件的需求，那該怎麼辦呢？如下是我總結的幾個經常使用的方法。

1. 數據經過jquery的event.data與事件綁定

for (var i=0; i<=2; i++) {
    $("#" + i).on("click", {key: i}, function(event) {
        alert(event.data.key);
    });
};

2. 數據經過jquery的data方法與dom元素綁定

for (var i=0; i<=2; i++) {
    $("#" + i).data("key", i);
    $("#" + i).on("click", function(){
        alert($(this).data("key"));
    });
};

3. 第三種方法是原生js的方法，在on函數的外層寫一個當即執行的函數，其目的是生成做用域，循環三遍即生成三個做用域，i的值由最下面的參數傳入，三個做用域互不影響，所以也能夠實現循環綁定的效果

for (var i=0; i<=2; i++) {
    (function(i) {
        $("#" + i).on("click", function(){
            alert(i);
        });
    })(i);
};

   若是你們有更簡便的方法，歡迎一塊兒交流~