故事的开头是我想点击页面的每一个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 事件,也就点击没有反应了。