参考：
1.https://www.cnblogs.com/liao8735/p/3944913.html
2.https://www.cnblogs.com/pssp/p/5215417.html
在编写JS的时候我们经常会遇到要对一系列元素进行事件绑定，循环对元素的事件进行赋值，在这个过程中我们会遇到一个问题，那就每个元素事件运行的时候变量怎么都是相同的值。
这里涉及到变量的作用域的问题，可以用闭包来解决这个问题。
这里举个简单的列子来说明：
<ul id="ulDemo">
<li>数据</li>
<li>数据</li>
<li>数据</li>
<li>数据</li>
<li>数据</li>
</ul>
我们来给这些li添加一个onclick事件，弹出li是第几条数据
|
1
2
3
4
5
6
7
|
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的作用域独立出来
|
1
2
3
4
5
6
7
|
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); } |
其他写法
|
1
2
3
4
5
6
7
8
9
|
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); } |
|
1
2
3
4
5
6
7
|
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); } |