js 里面for循环包着onclick的奇妙故事

故事的开头是我想点击页面的每一个p标签都让他们的内容变成happy。

  • 于是我敲下了如下代码

    <body>
       <p>aaaaap>
       <p>bbbbbp>
       <p>cccccp>
       <p>dddddp>
       <p>eeeeep>
    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事件了,能做到批量管理!

js 里面for循环包着onclick的奇妙故事_第1张图片

  • Σ( ° △ °|||)︴但是,好像有什么问题。我的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>   

js 里面for循环包着onclick的奇妙故事_第2张图片

  • Σ( ° △ °|||)︴输出的 i 是5也就是说for循环已经结束了,那好像这两个 i 不是同一回事哦。好像是??for 和 onclick 里的函数是异步执行的哦。
    js 里面for循环包着onclick的奇妙故事_第3张图片
  • ✧(≖ ◡ ≖✿) 那测试下有没有分步运行好了。用一个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 事件,也就点击没有反应了。

你可能感兴趣的:(js)