标签：结果 his UNC 直接 js事件 length elements 导致 click
最近碰到一个问题，关于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最后的值。
也就是说，这个事件在没有点击时是不会跟着循环运行的，而外部循环依旧是进行的，这就造成一开始代码运行循环结束，然后事件点击只能得到最后的值。
那么为了防止这样的情况，我尝试了在后面增加“()”使其变成自运行函数进行测试，发现终于可以正常弹值，可是这也不我想要的。因为我还是想要点击弹值，而不是加载
后自动弹值。
之后经过改正，想到，既然是事件没有跟着循环运行得到值，为何不直接将“ 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这个知识点对于我这个小萌新来说真的是有很大难度，
下一篇更新的博文我打算写它，彻底把它搞清楚才行。
标签：结果 his UNC 直接 js事件 length elements 导致 click
原文地址：https://www.cnblogs.com/wxhhts/p/9314616.html
