1.html如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>try-函数</title>
<script type="text/javascript">
</script>
</head>
<body>
<div id="div1">aaa</div>
<div id="div2">bbb</div>
<div id="div3">ccc</div>
</body>
</html>
2.在,script标签中插入如下js
window.onload=function () {
for (var i=1;i<4;i++){
var aa= document.getElementById('div'+i);
aa.addEventListener('click',function(){
alert(i);
})
}
}
执行结果均为4;
3.改变代码如下
window.onload=function () {
for (var i=1;i<4;i++){
(function (i) {
var aa= document.getElementById('div'+i);
aa.addEventListener('click',function(){
alert(i);
})
})(i)
}
}
得到了预期结果,点击aaa时弹出1,bbb时弹出2,ccc弹出3。
在js中函数内部可以读取全局变量,但是函数外部无法读取函数内的局部变量。
第一种情况下i为全局变量,i始终取值为for循环的最后一个值。
今天的学习中还出现了一个很无语的问题,div中书写id时多了一个空格,document.getElementById("div"+i)无论如何都取不到值。