js动态循环绑定事件的变量问题

在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定，循环对元素的事件进行赋值，在这个过程中我们会遇到一个问题，那就每个元素事件运行的时候变量怎么都是相同的值。

这里涉及到变量的作用域的问题，可以用闭包来解决这个问题。

这里举个简单的列子来说明：

<ul id="ulDemo">
　　<li>数据</li>
　　<li>数据</li>
　　<li>数据</li>
　　<li>数据</li>
　　<li>数据</li>
</ul>

我们来给这些li添加一个onclick事件，弹出li是第几条数据

       var list = document.getElementById("ulDemo").getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            var li = list[i];
            li.onclick= function () {
                alert("第" + (i + 1) + "条" + this.innerHTML);
            }
        }

结果弹出的都是第6条数据，这里的onclick函数中的变量i指向的内存地址，经过循环之后i变成了5，所有的li的点击事件都在同一个作用域中，我们可以通过闭包把i的作用域独立出来

  var list = document.getElementById("ulDemo").getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            var li = list[i];
            li.onclick= (function (index) {
                return function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
            })(i);
        }

其他写法

 for (var i = 0; i < list.length; i++) {
            var li = list[i];

            var addClick = function (el, index) {
                el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
            };

            addClick(li, i);
        }

　　

 for (var i = 0; i < list.length; i++) {
            var li = list[i];

            (function (el,index) {
                el.onclick= function () { alert("第" + (index + 1) + "条" + this.innerHTML) };
            })(li,i);
        }