javascript 碰到的一个 循环的问题

最近碰到一个问题,关于javascript 循环,真是让我对这门语言更加的好奇(好气)了,话不多说,直接上代码:

<body>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<script type="text/javascript">


window.onload=function(){


var p=document.getElementsByTagName("p");


for(var i=0;i<p.length;i++){


p[i].onclick=function(){


alert(i);
}
}
}
</script>
</body>这是一个点击事件,我开始的想法是点击上面的p ,触发点击事件,弹出 i 值,但是结果每次都弹出5.

后来查询之后才得知:js事件处理器在线程空闲时间不会运行,导致最后运行的时候输出的都是i最后的值。

也就是说,这个事件在没有点击时是不会跟着循环运行的,而外部循环依旧是进行的,这就造成一开始代码运行循环结束,然后事件点击只能得到最后的值。

那么为了防止这样的情况,我尝试了在后面增加“()”使其变成自运行函数进行测试,发现终于可以正常弹值,可是这也不我想要的。因为我还是想要点击弹值,而不是加载

扫描二维码关注公众号,回复: 2166217 查看本文章

后自动弹值。

之后经过改正,想到,既然是事件没有跟着循环运行得到值,为何不直接将“ i ”的值直接分配给P[ i ]?

于是:

window.onload=function(){


var p=document.getElementsByTagName("p");


for(var i=0;i<p.length;i++){


p[i].i=i;  //在这里将i 保存起来


p[i].onclick=function(){


alert(this.i);


}
}
}

  结果运行正常。

这里我用了this ,关于this这个知识点对于我这个小萌新来说真的是有很大难度,

下一篇更新的博文我打算写它,彻底把它搞清楚才行。

猜你喜欢

转载自www.cnblogs.com/wxhhts/p/9314616.html