当前位置：网站首页>Web APIs DOM- 网页特效篇-滚动事件和加载事件

Web APIs DOM- 网页特效篇-滚动事件和加载事件

2022-07-20 00:45:00 【黑马程序员官方】

前期更新笔记内容： Web API 基本认知 / 获取DOM元素 / 设置/修改DOM元素内容和元素属性 / 定时器-间歇函数 / 事件基础 / 高阶函数 / 环境对象 / 综合案例-Tab栏切换 / DOM节点 /DOM 时间对象/DOM 重绘和回流/ DOM- 事件对象/DOM- 事件流 / DOM- 事件委托 +综合案例

一、滚动事件和加载事件

1.1 滚动事件

当页面进行滚动时触发的事件

为什么要学？

很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

事件名：scroll

监听整个页面滚动：

给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可

页面滚动事件代码：

<!DOCTYPE html>
<html lang="en">

<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</title>
    <style> body { height: 3000px; } div { overflow: auto; width: 200px; height: 200px; background-color: pink; } </style>
</head>

<body>
    <div>
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字

    </div>
    <script> let div = document.querySelector('div') window.addEventListener('scroll', function () { console.log(111) }) // div.addEventListener('scroll', function () {
       // console.log(111) // }) </script>
</body>

</html>

1.2 加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

为什么要学？

有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到

事件名：load

监听页面所有资源加载完毕：

给 window 添加 load 事件

注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

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

事件名：DOMContentLoaded

监听页面DOM加载完毕：

给 document 添加 DOMContentLoaded 事件

加载事件代码：

<!DOCTYPE html>
<html lang="en">

<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</title>
    <style> body { height: 3000px; } div { overflow: auto; width: 200px; height: 200px; background-color: pink; } </style>
    <script> window.addEventListener('load', function () { let div = document.querySelector('div') console.log(div) }) </script>
</head>

<body>
    <div>
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字
        我里面可以放很多的文字

    </div>
    <script> // let div = document.querySelector('div') </script>
</body>

</html>