JS循环绑定事件问题

最近项目希望对页面事件做成可配置的，这就需要对配置的元素循环添加对应的事件，但最后所有元素都绑定的最后一个元素绑定的事件。查了资料解决如下：
http://www.cnblogs.com/yangjiewu/p/4753202.html

<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)。

但是在实际工作中我们经常会遇到这种循环绑定事件的需求，那该怎么办呢？以下是我总结的几个常用的方法

数据通过jquery的event.data与事件绑定

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

数据通过jquery的data方法与dom元素绑定

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

第三种方法是原生js的方法，在on函数的外层写一个立即执行的函数，其目的是生成作用域，循环三遍即生成三个作用域，i的值由最下面的参数传入，三个作用域互不影响，因此也可以实现循环绑定的效果

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

JS循环绑定事件问题

推荐阅读更多精彩内容