day23 其他事件（页面加载事件、页面滚动事件）

news2025/4/19 9:10:13

页面加载事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
为什么使用：
- 有时候需要等页面资源全部处理完毕再做一些事
- 老代码喜欢把script写在head中，这时候直接找dom元素找不到
事件名：load
监听页面所有资源加载完毕
- 给window添加load事件

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

示例：

<!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>
        //方式1.等待页面所有资源加载完毕，就回去执行回调函数
        window.addEventListener('load', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert('hhh')
            })
        })
        img.addEventListener('load',function(){
            //方式2.等待图片加载完毕，再执行里面的代码
        })
    </script>
</head>

<body>
    <button>click</button>
</body>

</html>

当初始的HTML文档被完全加载和解析完成后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕
- 给document添加DOMContentLoaded事件

示例：

<!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>
        document.addEventListener('DOMContentLoaded', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert('hhh2')
            })
        })
    </script>
</head>

<body>
    <button>click</button>
</body>

</html>

页面/元素滚动事件

滚动条在滚动的时候持续触发的事件
为什么使用
- 很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如回到顶部
事件名：scroll
监听整个页面滚动
- 给window或document添加scroll事件
监听某个元素的内部滚动直接给某个元素添加即可
使用场景
- 想要页面滚动一段距离后就显示隐藏，可以使用scroll来检测滚动的距离

示例：页面滚动事件
在这里插入图片描述

<style>
        body {
            height: 3000px;
        }
    </style>
</head>

<body>
    <script>
        window.addEventListener('scroll', function () {
            console.log('hhh')
        })
    </script>

</body>

页面滚动事件——获取位置

scrollLeft和scrollTop（属性）
- 获取被卷去的大小
- 获取元素内容往左、往上滚出去看不到的距离
- 这两个值是可读写的

示例1：
在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-top: 100px;
            height: 3000px;
        }

        div {
            margin: 100px;
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
    </div>
    <script>
        // window.addEventListener('scroll', function () {
        //     // console.log('hhh')
        // })
        const div = document.querySelector('div')
        div.addEventListener('scroll', function () {
            // console.log('hhh')
            console.log(div.scrollTop)
        })
    </script>

</body>

</html>

示例2——获取页面滚动的位置：

注意原理：
在这里插入图片描述

效果：
在这里插入图片描述
滚动小于100像素时不显示

滚动大于等于100像素时显示

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding-top: 100px;
            height: 3000px;
        }

        div {
            display: none;
            margin: 100px;
            overflow: auto;
            width: 200px;
            height: 200px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
        文字文字文字文字文字文字文字文字
    </div>
    <script>
        const div = document.querySelector('div')
        window.addEventListener('scroll', function () {
            // console.log('hhh')
            // 页面滚动多少像素？
            // 获取html元素写法
            //下面这行代码必须写在里面，获取数字型数据，没有单位
            console.log(document.documentElement.scrollTop)
            const n = document.documentElement.scrollTop
            if (n >= 100) {
                div.style.display = 'block'
            } else {
                div.style.display = 'none'
            }
        })
        // const div = document.querySelector('div')
        // div.addEventListener('scroll', function () {
        //     // console.log('hhh')
        //     console.log(div.scrollTop)
        // })
    </script>

</body>

</html>