老师,请帮解释一下下面的问题
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
</style>
</head>
<body>
<ul id="myul">
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
<li>事件监听</li>
</ul>
<script>
var oUl = document.getElementById('myul');
var oLi = oUl.getElementsByTagName('li')
for(var i=0;i<oLi.length;i++){
let a = oLi[i];
oLi[i].onclick = function(){
//this.style.color="red" //教程的写法
// oLi[i].style.color="red"
a.style.color="red"
}
}
</script>
</body>
</html>相关截图:

源自:DOM
4-21 事件委托(1)
6
收起
正在回答
1回答
同学你好,涉及到作用域的问题。
使用let声明变量时,每循环一次,就会生成一个局部作用域;每个局部作用域中,都存在变量a:

这样,每个事件处理函数外层,都有一个局部作用域,并且里面有a,a存储对应的li:


当事件处理函数触发时,会沿着各自的作用域往外查找变量a:


此时的a,与事件触发者对应着,效果是对的。
当不声明变量a时,少了一层作用域。事件处理函数外面,是全局作用域:

事件触发时,for循环已经结束了(代码执行很快,当我们点击li的时候,代码肯定执行完了,即for循环完事了)。此时全局变量i,已经是oLi.length了:

点击li,事件处理函数所用的i,会是全局变量i,而不是li对应的索引:

所以效果不对。
祝学习愉快!
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星