1. 页面加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
为什么要学?
有些时候需要等页面资源全部处理完了做一些事情
老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
事件名：load
监听页面所有资源加载完毕
给 window 添加 load 事件
// 页面加载事件
window.addEventListener('load', function() {
// 执行的操作
})注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
当初始的 HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名: DOMContentLoaded
监听页面DOM加载完毕：
给 document 添加 DOMContentLoaded 事件
document.addEventListener('DOMContentLoaded', function() {
// 执行的操作
});2. 元素滚动事件
滚动条在滚动的时候持续触发的事件
为什么要学?
很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部
事件名：scroll
监听整个页面滚动:
// 页面滚动事件
window.addEventListener('scroll', function() {
console.log('我滚了')
})给 window 或 document 添加 scroll 事件
监听某个元素的内部滚动直接给某个元素加即可
页面滚动事件-获取位置
scrollLeft和scrollTop (属性)
获取被卷去的大小
获取元素内容往左、往上滚出去看不到的距离
这两个值是可读写的
尽量在scroll事件里面获取被卷去的距离
const div = document.querySelector('div')
div.addEventListener('scroll', function() {
console.log(div.scrollTop)
})开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
window.addEventListener('scroll', function() {
// document.documentElement 是获取 html 元素的方式
const n = document.documentElement.scrollTop
console.log(n)
})scrollTo()方法可把内容滚动到指定的坐标
// 让页面滚动到 y 轴 1000 像素的位置 window.scrollTo(0, 1000)
3. 页面尺寸事件
会在窗口尺寸改变的时候触发事件
事件名：resize
window.addEventListener('resize', function() {
// 执行的代码
})检测屏幕宽度:
window.addEventListener('resize', function() {
let w = document.documentElement.clientWidth
console.log(w)
})获取元素宽高：
获取元素的可见部分宽高 (不包含边框，margin，滚动条等）
clientwidth 和 clientHeight
4. 元素尺寸与位置
使用场景：
前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。
简单说，就是通过 js 的方式，得到元素在页面中的位置
这样我们可以做，页面滚动到这个位置，就可以做某些操作，省去计算了
获取宽高：
获取元素的自身宽高、包含元素自身设置的宽高、padding、border
offsetWidth 和 offsetHeight
获取出来的是数值，方便计算
注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
获取位置：
获取元素距离自己定位父级元素的左、上距离
offsetLeft 和 offsetTop 注意是只读属性
另一种方式：
element.getBoundingClientRect()
方法返回元素的大小及其相对于视口的位置
5. 总结