<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
// 造三个按钮
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
<script type="text/javascript">
// 获取被制造出来的三个按钮
let allButton = document.getElementsByTagName('button');
for(var i = 0 ;i <allButton.length;i++){
allButton[i].onclick = function(){
console.log(i);
}
}
// 匿名函数
for(var index = 0 ;index <allButton.length;index++){
(function(i){
console.log(i);
})(index)
}
// 快级别函数
for(let i = 0 ;i <allButton.length;i++){
allButton[i].onclick = function(){
console.log(i);
}
}
</script>
</body>
</html>昨晚太困，写的不好。
看下面。。。。。。。。。。。锵锵！！！！！！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>CASE1: for 循环的计数器是var的场合，先循环完了，才去绑定的事件，所以输出不正。全部是是3.</h1>
<div id="case1">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</div>
<script type="text/javascript">
// 获取被制造出来的三个按钮
let allButton1 = document.querySelectorAll('#case1>button');
//
for(var i = 0 ;i <allButton1.length;i++){
allButton1[i].onclick = function(){
console.log(i);
}
}
</script>
<h1>CASE2: 使用了匿名函数，关于匿名函数的概念，我还得研究研究，反正匿名函数是可以解决上面case1的尴尬问题，实现了一边绑定，一边传值的效果。所以就是绑定的当时的，计数时候的那个时间点的循环变量。据说是通过index这个形参给传进去的</h1>
<div id="case2">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</div>
<script type="text/javascript">
// 获取被制造出来的三个按钮
let allButton2 = document.querySelectorAll('#case2>button');
// 匿名函数
for(var index = 0 ;index <allButton2.length;index++){
(function(i){
console.log(i);
})(index)
}
</script>
<h1>CASE3: 与case1相比，只是var i 变成了 let j ，神奇不神奇，厉害不厉害，据说这种就是所谓的块级作用域的使用，相当于case2中那样使用了匿名函数。</h1>
<div id="case3">
<button id="btn1">btn1</button>
<button id="btn2">btn2</button>
<button id="btn3">btn3</button>
</div>
<script type="text/javascript">
// 获取被制造出来的三个按钮
let allButton3 = document.querySelectorAll('#case3>button');
// 块级别函数
for(let j = 0 ;j <allButton3.length;j++){
allButton3[j].onclick = function(){
console.log(j);
}
}
</script>
</body>
</html>