核心提示：JS循环给li添加单击事件时总是弹出最后一个i值bodyulli0/lili1/lili2/lili3/li/ul/body题目：单击列表项弹出对应的数字。错误方法：script type=text/...
JS循环给li添加单击事件时总是弹出最后一个i值
<body>
<ul>
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
题目：单击列表项弹出对应的数字。
错误方法：
<script type="text/javascript">
var list=document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick=function(){
alert(i);
};
}
</script>
运行结果：不管点哪一个列表项都会弹出4。
原因分析（自己的一点理解，不知道对不对）：js是单线程的，先执行完主线程上的任务，再执行“任务队列”（事件队列）中的任务，当单击列表项时主线程中的i的值已经变成4了，所以每次单击时会弹出4。
可以看看阮一峰老师对JS运行机制的讲解
对于上面出现的问题可以用闭包来解决。将i作为函数参数（值传递）传递给内部函数。
方法一：
<script type="text/javascript">
var list=document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
(function(j){
list[j].onclick=function(){
alert(j);
};
})(i);
}
</script>
方法二：
<script type="text/javascript">
var list=document.getElementsByTagName("li");
for (var i = 0; i < list.length; i++) {
list[i].onclick=(function(j){
return function(){
alert(j);
}
})(i);
}
</script>
还有一种方法是ES6里的，用let定义变量，会产生块级作用域。
方法三：
<script type="text/javascript">
var list=document.getElementsByTagName("li");
for (let i = 0; i < list.length; i++) {
list[i].onclick=function(){
alert(i);
};
}
</script>
