javascript 窗口加载事件相关问题

最新推荐文章于 2023-11-11 19:24:18 发布

bcbobo21cn

最新推荐文章于 2023-11-11 19:24:18 发布

阅读量908

点赞数

分类专栏： web前端文章标签： javascript 窗口事件 onload

本文链接：https://blog.csdn.net/bcbobo21cn/article/details/123220079

版权

web前端专栏收录该内容

150 篇文章 1 订阅

订阅专栏

window.onload是窗口(页面)加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS文件等),就调用的处理函数；
有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数;
window.onload传统注册事件方式只能写一次,如果有多个,会以最后-个window.onload为准；
如果使用addEventListener则没有限制；

DOMContentLoaded事件触发时,仅当DOM加载完成,不包括样式表,图片, flash等；
le9以上才支持;
如果页面的图片很多的话，从用户访问到onload触发可能需要较长的时间，可用DOMContentl oaded事件；

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

        </style>
        <script type="text/javascript">

        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })

        window.addEventListener('load', function() {
 
            alert(22);
        })

        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
    
        </script>
    </head>
    <body>    
        <button id = "btn1" >请点击</button>
        
    </body>
</html>

运行情况；

先弹出这个；这是DOM加载完成弹的；