故事的开头是我想点击页面的每一个p标签都让他们的内容变成happy。
- 于是我敲下了如下代码
<!-- html部分 -->
<body>
<p>aaaaa</p>
<p>bbbbb</p>
<p>ccccc</p>
<p>ddddd</p>
<p>eeeee</p>
</body>
//js部分
<script type="text/javascript">
var pp = document.getElementsByTagName("p");
for(var i=0;i<pp.length;i++){
pp[i].onclick = function(){
this.innerText = "happy";
}
}
</script>
- (๑•̀ㅂ•́)و✧ 很好，我确实让所有的p标签都产生onclick事件了，能做到批量管理!
- Σ( ° △ °|||)︴但是，好像有什么问题。我的onclick函数居然调用了外面的for循环？不对呀跑完onclick的函数就没了才对呀？测试一下，把把 happy 改成 i 看看情况。
//js部分
<script type="text/javascript">
var pp = document.getElementsByTagName("p");
for(var i=0;i<pp.length;i++){
pp[i].onclick = function(){
this.innerText = i;
}
}
</script>
- Σ( ° △ °|||)︴输出的 i 是5也就是说for循环已经结束了，那好像这两个 i 不是同一回事哦。好像是？？for 和 onclick 里的函数是异步执行的哦。
- ✧(≖ ◡ ≖✿) 那测试下有没有分步运行好了。用一个play() 函数包住 for 循环但不执行play()函数
//js部分
<script type="text/javascript">
function play(){
var pp = document.getElementsByTagName("p");
for(var i=0;i<pp.length;i++){
pp[i].onclick = function(){
this.innerText = i;
}
}
}
</script>
- ◐▽◑ 理所当然地并没有产生onclick事件。
╰(￣▽￣)╭ 总结：
1. onclick 事件并不会调用外面的 for 循环，只不过一开始程序先把for循环跑了一遍，产生了5个对应p标签的的 onclick 事件监听，但是 onclick 没有执行。pp[i] 是从0，1，2，3，4遍历的理所当然地也就能够让每一个p元素都有 onclick 事件
2. 直到各个p标签的 onclick 调用的时候，才把刚才跑过的 i=5 打印出来。
3. play()函数没有执行过，也就没有产生过 onclick 事件，也就点击没有反应了。
3804
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
