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
![[深度学习] GPU处理能力（TFLOPS/TOPS）](https://img-blog.csdnimg.cn/88f630201e5f4a26877de460331d60bf.png)
