JS页面加载事件

最新推荐文章于 2024-03-05 17:39:17 发布

远近高低各不同

最新推荐文章于 2024-03-05 17:39:17 发布

阅读量550

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_74577714/article/details/134330710

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

让我为大家介绍一下页面加载事件吧！
我们为什么需要使用页面加载事件？
1.有些时候需要等页面资源全部处理完了做一些事情
2.有部分的人喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

一、load

加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
监听页面所有资源加载完毕
我们通常都是给window 添加load 事件
注意: 不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

我们不添加load事件时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        const btn = document.querySelector("button")
        btn.onclick = function(){
            console.log(1) //点击后不打印 没有用
        }
    </script>
</head>
<body>
    <button>点击</button>
</body>
</html>

当我们添加load事件时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        window.onload = function () {
            const btn = document.querySelector("button")
            btn.onclick = function () {
                console.log(1) //点击按钮后 打印 1
            }
        }
    </script>
</head>
<body>
    <button>点击</button>
</body>
</html>

二、DOMContentLoaded

当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

监听页面DOM加载完毕
给document添加 DOMContentLoaded 事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const btn = document.querySelector("button")
            btn.onclick = function () {
                console.log(1) //点击后打印 1 
            }
        }) 
    </script>
</head>
<body>
    <button>点击</button>
</body>
</html>