12.其他事件-CSDN博客

本文链接：https://blog.csdn.net/m0_74891783/article/details/132058980

12.1 页面加载事件

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

1.事件名：load
●监听页面所有资源加载完毕：
➢给window添加load事件

//页面加载事件
window.addEventListener( 'load', function () {
// 执行的操作
})

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

例如将js写在head上：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 等待页面所有资源加载完毕，就回去执行回调函数
        window.addEventListener('load', function () {
            const btn = document.querySelector('button')
            btn.addEventListener('click', function () {
                alert(555)
            })
        })
    </script>
</head>

<body>
    <button>点击</button>
</body>

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

document.addEventListener('DOMContentLoaded', function () {
//执行的操作
})

12.2 页面滚动事件

事件名：scroll
●滚动条在滚动的时候持续触发的事件
●用处：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
●监听整个页面滚动:

//页面滚动事件
window.addEventListener( 'scroll', function () {
//执行的操作
})

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

12.2.1页面滚动事件-获取位置

●scrollLeft和scrollTop ( 属性)
➢获取被卷去的大小
➢获取元素内容往左、往上滚出去看不到的距离
➢这两个值是可读写的（既可取值也可赋值），得到的值是数字型
●尽量在scroll事件里面获取被卷去的距离

div.addEventListener( 'scroll', function () {
console.log(this.scrollTop)
})

在这里插入图片描述
【示例】

const div = document.querySelector('div')
     div.addEventListener('scroll', function () {
         console.log(div.scrollTop)
})

●获取body、html的写法
在这里插入图片描述
注意事项:
document.documentElement HTML 文档返回对象为HTML元素

【示例】
页面滚动一定程度某个元素的显示或隐藏

<!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: scroll;
            width: 150px;
            height: 150px;
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div>
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
        我里面有很多很多很多的文字
    </div>
    <script>
        const div = document.querySelector('div')
        window.addEventListener('scroll', function () {
            // 获取html 元素写法
            // document.documentElement
            // n 表示页面翻滚后顶部被卷去了多少像素
            const n = document.documentElement.scrollTop
            if (n >= 100) {
                div.style.display = 'block'
            } else {
                div.style.display = 'none'
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

12.2.2页面滚动事件-滚动到指定的坐标

scrollTo() 方法可把内容滚动到指定的坐标
●语法:

元素.scrollTo(x, y)
//让页面滚动到y轴1000像素的位置
window.scrollTo(0, 1000 )

12.3 页面尺寸事件

●会在窗口尺寸改变的时候触发事件:
➢ resize

window.addEventListener( 'resize', function () {
//执行的代码
})

●检测屏幕宽度:

window.addEventListener( 'resize'，function () {
	let w = document.documentElement.clientWidth 
	console.log(w)
})

12.3.1页面尺寸事件-获取元素宽高

●获取宽高:
➢获取元素的可见部分宽高(不包含border，margin, 滚动条等)
➢clientWidth和clientHeight
●语法：

元素.clientWidth/clientHeight

在这里插入图片描述