onload和onclick及其他事件的默认执行顺序

最新推荐文章于 2023-07-01 09:51:35 发布

写代码的疯子

最新推荐文章于 2023-07-01 09:51:35 发布

阅读量2.4k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/u010411682/article/details/76861057

版权

javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        <!-- 以ie最新模式渲染当前页面 -->
        <!--  X-UA-Compatible是ie8专有meta属性-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
        <title>document.wirte()测试</title>

    </head>
    <body>
        <div class="wrap" style="text-align:center;">
            <button id="btn" >千万不要点，如果点了这个页面所有内容都被覆盖掉了</button>
        </div>

       <script>
       /*  onclick事件在onload事件后执行，执行结果成功 */
       window.onload = function(){
            alert("页面加载完成了，后续onclick事件开始执行");
            document.getElementById("btn").onclick=function()
            {   
                alert("onclick事件开始执行");
                document.write("<center style='color:red;'>让你不要点不要点，你非要点，看吧，是不是页面之前的所有内容都没了</center><br/>");
                document.write("<center style='color:red;'>为什么页面之前的内容没有了？</center><br/>");
                document.write("<center style='color:red;'>答：因为页面加载完成以后，浏览器输出流随之关闭。给button添加了onclick事件，当该事件被触发时，浏览器输出流重新打开，重新输出内容，所以之前的内容会被覆盖掉</center>");
                // 是否说明onclick事件以及其他事件会触发或者说促使页面加载完成，即页面onload事件的触发？
                //document.close();
            }
        }

        /* onload事件在onclick之后执行，执行结果 失败 

        document.getELementById("btn").onclick = function(){
            alert("onclick事件开始执行");
            window.onload = function(){
                alert("onload事件开始执行");
                document.write("<center style='color:red;'>让你不要点不要点，你非要点，看吧，是不是页面之前的所有内容都没了</center><br/>");
                document.write("<center style='color:red;'>为什么页面之前的内容没有了？</center><br/>");
                document.write("<center style='color:red;'>答：因为页面加载完成以后，浏览器输出流随之关闭。给button添加了onclick事件，当该事件被触发时，浏览器输出流重新打开，重新输出内容，所以之前的内容会被覆盖掉</center>");
            }
        }

        */
        </script>
    </body>
</html>
总结：说明onclick及其他事件都在window.onload之后执行。