这里使用 var 关键字声明了循环迭代变量 i,但这个变量并不会被限制在 for 循环的块级作用域内。因此,渲染到页面上之后,点击每个div都会弹出元素总数。这是因为在执行单击处理程序时,迭代变
量的值是循环结束时的最终值,即元素的个数。而且,这个变量 i 存在于循环体外部,随时可以访问。
<html>
<body>
<div style="width: 100px; height: 100px; background-color: red;">
<button>点击按钮1</button>
</div>
<div style="width: 100px; height: 100px; background-color: red;">
<button>点击按钮1</button>
</div>
<div style="width: 100px; height: 100px; background-color: red;">
<button>点击按钮1</button>
</div>
</body>
<script type="text/javascript">
let divs = document.querySelectorAll('div');
// 达不到目的!
for (var i = 0; i < divs.length; ++i) {
divs[i].addEventListener('click', function() {
alert(i);
});
}
</script>
</html>
用户触发的onclick事件之前,for循环已经执行结束了,而for循环执行完的时候i=3。。无论点击哪个弹框,都显示为3
使用立即执行函数解决
let divs = document.querySelectorAll('div');
for (var i = 0; i < divs.length; ++i) {
divs[ii].addEventListener('click', (function(frozenCounter) {
return function() {
alert(frozenCounter);
};
})(ii));
}
在立即执行函数执行的时候,i 的值被赋值给 ii,此后 ii 的值一直不变,i 的值从 0 变化到 3,对应3 个立即执行函数,这 3个立即执行函数里面的 ii 「分别」是 0、1、2。
点击第一个按钮,显示0,第二个按钮显示1,第三个显示2
let也可以实现上述的功能,仅仅是将for循环中的var换成let
let divs = document.querySelectorAll('div');
for (let i = 0; i < divs.length; ++i) {
divs[i].addEventListener('click', function(frozenCounter) {
return function() {
alert(frozenCounter);
};
});
}