本文通过一个简单的HTML页面示例，展示了如何使用JavaScript来为多个DOM元素添加事件监听器，并深入探讨了由此引发的作用域问题。当事件处理函数在循环内部定义时，所有事件处理函数将共享同一个变量环境，导致点击不同元素时返回相同的结果。文章分析了这一现象的原因，并提供了修复建议。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
var oP=document.getElementsByTagName("p")
for(var i=0;i<oP.length;i++){
oP[i].index=i
oP[i].onclick=function(){
console.log(i) //3 【for里面套函数，i为跳出循环的数】
alert(this.index)
}
}
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<script>
var oP=document.getElementsByTagName("p")
for(var i=0;i<oP.length;i++){
oP[i].index=i
oP[i].onclick=function(){
console.log(i) //3 【for里面套函数，i为跳出循环的数】
alert(this.index)
}
}
</script>
</body>
</html>
扫一扫
664
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
