关于onclick function中的this变量的简单问题
<html><head><style>div{width:50px;height:50px;border:1pxsolidbrown;}</style><script>v...
<html>
<head>
<style>div {width:50px; height:50px; border:1px solid brown;}</style>
<script>
var Arr = document.getElementsByTagName("div");
window.onload = function() {
for (i = 0; i < Arr.length; i++) {
Arr[i].index = i;
Arr[i].onclick = function() {
Arr[this.index].style.backgroundColor = "pink"; //this.index!
}
}
}
</script>
</head>
<body>
<div id = "A" >1</div> <div id = "B" >2</div> <div id = "C" >3</div>
</body>
</html>
此段代码运行后,点击每一个div,背景颜色都会变为粉红色。
但如果将有注释的那一行代码里的this.index改成i,即整行变为:
Arr[i].style.backgroundColor = "pink";
则运行报错。
这是为什么?请大神指教,谢谢! 展开
<head>
<style>div {width:50px; height:50px; border:1px solid brown;}</style>
<script>
var Arr = document.getElementsByTagName("div");
window.onload = function() {
for (i = 0; i < Arr.length; i++) {
Arr[i].index = i;
Arr[i].onclick = function() {
Arr[this.index].style.backgroundColor = "pink"; //this.index!
}
}
}
</script>
</head>
<body>
<div id = "A" >1</div> <div id = "B" >2</div> <div id = "C" >3</div>
</body>
</html>
此段代码运行后,点击每一个div,背景颜色都会变为粉红色。
但如果将有注释的那一行代码里的this.index改成i,即整行变为:
Arr[i].style.backgroundColor = "pink";
则运行报错。
这是为什么?请大神指教,谢谢! 展开
2个回答
2014-07-14 · 知道合伙人互联网行家
关注
展开全部
你好,因为事件绑定的函数是通过事件的触发来调用的。onload事件的函数中在循环Arr[i].onclick = function()的时候,只是将匿名函数绑定到Arr[i]的onclick事件,而并未执行;当Arr[i]的onclick事件被触发的时候,才执行其绑定的匿名函数,此时,i已经循环到了Arr.length,即跳出循环时的下标,而Arr的最大下标为Arr.length-1,所以会报错。
记住“事件绑定的函数是通过触发来调用的,要被触发才会被执行“。
记住“事件绑定的函数是通过触发来调用的,要被触发才会被执行“。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询