js为li添加点击事件，并且输出当前li点击的值

在使用js开发过程中，经常会遇到这样一个问题“如何对多个li添加onClick点击事件，并且输出点击对象的当前内容”。这是我们就想到了常用的for循环，如下图所示：

直接输出当前点击对象的内容

通过运行会发现依次点击li分别会弹出0,1,2；

由这类问题会引发一系列的问法，如果我们alert的是当时循环中的i值会出现什么情况：

直接输出循环中的i值

此时通过运行会发现无论点击那个li最终只会输出2，这是由于onclick是一个事件，该事件委托但是没有触发，并且由于js代码自上而下的运行规律，使得i值已经变成了2，当点击li调用回调函数的时候只会弹出2；

那么如何想要显示的是0,1,2那么该如何操作，最常见的俩种解决方式是：（1）使用es6中的let设置变量；（2）使用闭包；

通过let声明i变量

es6种let声明的变量具有块级作用域，所以不会进行变量覆盖；详情可以查看es6的相关语法；

闭包的使用方法：

使用闭包

必须得解释一下什么是闭包，为什么要使用闭包：

简单来说：闭包就是能过读取其他函数内部变量的函数；因为在js中存在‘链式作用域’，子对象可以访问父对象中的变量，但是父对象不能访问修改子对象中的变量，所有在函数中再次声明一个子函数（闭包函数），用来实现点击弹出事件；