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


<html>
    <head>
        <meta charset="utf-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
        
        
        <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("
让你不要点不要点,你非要点,看吧,是不是页面之前的所有内容都没了

"
); document.write("
为什么页面之前的内容没有了?

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

"); document.write("
为什么页面之前的内容没有了?

"); document.write("
答:因为页面加载完成以后,浏览器输出流随之关闭。给button添加了onclick事件,当该事件被触发时,浏览器输出流重新打开,重新输出内容,所以之前的内容会被覆盖掉
"); } } */
script> body> html> 总结:说明onclick及其他事件都在window.onload之后执行。

你可能感兴趣的:(javascript)