JavaScrip BOM 窗口加载事件

最新推荐文章于 2023-06-03 17:21:08 发布

花花叔叔

最新推荐文章于 2023-06-03 17:21:08 发布

阅读量379

点赞数 2

分类专栏： # 前端（旧）文章标签： javascript html html5

zbdx

本文链接：https://blog.csdn.net/qq_52077949/article/details/120234424

版权

前端（旧）专栏收录该内容

73 篇文章 4 订阅

订阅专栏

window.onload 是窗口 (页面）加载事件,当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS
文件等), 就调用的处理函数

注意：

有了 window.onload 就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容全部加载完毕，
再去执行处理函数。
window.onload 传统注册事件方式只能写一次，如果有多个，会以最后一个 window.onload 为准。
如果使用 addEventListener 则没有限制

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
Ie9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用
户的体验，此时用 DOMContentLoaded 事件比较合适。

这三种方式都是类似于给scrip最外层包裹了一层函数，前两个是window.开头，最后一个是document. 开头。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 传统会有冲突 ， 只能有一次
        // window.onload = function () {
        //     var btn = document.querySelector ('button') ;
        //     btn.onclick = function () {
        //         alert('nihao') ;
        //     }
        // }
        // window.onload = function () {
        //     var btn = document.querySelector ('button') ;
        //     btn.onclick = function () {
        //         alert('nihao1') ;
        //     }
        // }

        // 最新的方式
        window.addEventListener ('load' ,function () {
            var btn = document.querySelector ('button') ;
            btn.onclick = function () {
                alert('nihao2') ;
            }
        })

        // 不需要加载图片就可以
        document.addEventListener('DOMContentLoaded' , function () {
            alert('nihao3') ;
        })
    </script>

</head>
<body>
    <button>点击</button>
</body>
</html>