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);
};

   若是你们有更简便的方法，欢迎一块儿交流~