<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>点击li获取下标的几种方式</title>
</head>
<body>
<h1>点击li获取下标的几种方式</h1>
<ul>
<li>红的</li>
<li>蓝的</li>
<li>紫的</li>
<li>绿的</li>
<li>白的</li>
<li>黄的</li>
<li>黑的</li>
</ul>
<script>
var list = document.querySelectorAll('li')
// 第一种：for循环获取下标i
// for (var i = 0; i < list.length; i++) {
// list[i].index = i // 自定义属性发编号
// list[i].onclick = function () {
// console.log(this.index)
// }
// }
// 第二种：let的块级作用域属性获取到的是每个独立i
// for (let i = 0; i < list.length; i++) {
// list[i].onclick = function () {
// console.log(i)
// }
// }
// 第三种：伪数组转数组forEach遍历
// Array.from(list).forEach(function (li, index) {
// li.onclick = function () {
// console.log(index)
// }
// })
// 第四种：每个闭包都有一个自己的index
for (var i = 0; i < list.length; i++) {
// 立即执行函数把i作为实参，传递进去了，index接收，在内层函数里使用
// 每个事件都构成了一个闭包，每个闭包里都有一个自己的index
list[i].onclick = (function (index) {
return function () {
console.log(index)
}
})(i)
}
</script>
</body>
</html>
