在循环遍历加监听时,出现for循环中出现i等于数组长度的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 创建一个点击按钮的功能,判断是点击的第几个 -->
<script>
// window.onload = function () {
// let btnArry = document.getElementsByTagName('button');
// let j = btnArry.length //为了提高效率,不需要在下面的遍历中重复计算伪数组的长度
// for ( var i = 0; i < j ; i++) {
// btnArry[i].onclick = function(){
// alert('这是第'+ (i+1) +'个按钮')
// }
// }
// }
//解决方法:
/*方法一:添加下表索引,来存放i的值
window.onload = function () {
let btnArry = document.getElementsByTagName('button');
let j = btnArry.length //为了提高效率,不需要在下面的遍历中重复计算伪数组的长度
for ( var i = 0; i < j ; i++) {
//创建一个索引值来 保存点击的序号
// let index = i;
btnArry[i].onclick = function(){
alert('这是第'+ (index+1) +'个按钮')
}
}
}
*/
/*方法二:添加一个匿名函数,使其中产生闭包*/
window.onload = function () {
let btnArry = document.getElementsByTagName('button');
let j = btnArry.length //为了提高效率,不需要在下面的遍历中重复计算伪数组的长度
for ( var i = 0; i < j ; i++) {
(function(i){
btnArry[i].onclick = function(){
alert('这是第'+ (i+1) +'个按钮')
}
}(i))
}
}
/*方法三 : 将var修改为let产生块级作用域 */
</head>
<body>
<button>这是第一个按钮</button>
<button>这是第二个按钮</button>
<button>这是第三个按钮</button>
</body>
</html>