<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>4种方法解决为li添加事件问题</title>
<style type="text/css">
ul li{
list-style: none;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 10px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script type="text/javascript">
var lis = document.querySelectorAll("li");
/*
此时得到的是lis.length的值，这是问题的症结所在
*/
/*
这种问题的本质就是利用var声明的 i 是一个全局变量，全局变量在for执行时会得到最后一个数值(lis.length),所以会产生得不到每个中间值，
解决问题的本质是要将 i 转换成局部变量。
*/
// for(var i = 0;i<lis.length;i ){
// lis[i].onclick = function(){
// console.log(i);
// }
// }
得到结果如图：
/*
解决方法一：将i的值赋值给它本身的一个变量
*/
// for(var i = 0;i<lis.length;i ){
// lis[i].index = i;
// lis[i].onclick = function () {
// console.log(this.index);
// }
// }
得到结果如图：
/*
解决方法二：匿名自执行函数
*/
// 将 i 传给匿名自执行函数的局部变量j
// for(var i = 0;i<lis.length;i ){
// (function(j){
// lis[j].onclick = function () {
// console.log(j);
// }
// })(i)
// }
得到结果如图：
/*
解决方法三：利用函数参数方法
*/
// 将lis 和 li 传给函数的参数，函数的参数实际为局部变量
// function clickEvent (li , index) {
// li.onclick = function () {
// console.log(index);
// }
// }
// for(var i = 0;i<lis.length;i ){
// clickEvent(lis[i] , i)
// }
得到结果如图：
/*
解决方法四：把var 改为 let
*/
for(let i = 0;i<lis.length;i ){
lis[i].onclick = function () {
console.log(i);
}
}
得到结果如图：
</script>
</html>