页面加载事件
1.load事件
加载外部资源（如图片，css,js等）加载完毕触发的事件
// 页面加载完成后执行
window.addEventListener('load',function(){
执行事件
})
// 图片加载完成后执行
img.addEventListener('load',function(){
执行事件
})
2.DOMContentLoaded
当初始的html文档被完全加载和解析完成后，DOMContentLoaded事件被触发，无需等待样式表，图像等完全加载
给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){
//执行的操作
})
元素滚动事件
语法
document.addEventListener('scroll',function(){
//执行的操作
})
获取位置
被卷去的左侧或头部：scrollLeft和scrollTop（这两个数据是可读写的）
scrollTo(x,y):把内容滚动到指定的坐标
语法： 元素.scrollTo(x,y)
//让页面滚动到y轴1000像素的位置
window.scrollTo(0,1000)
可读写：可以赋值
例:检测页面滚动的距离，比如页面滚动100px,就可以显示一个元素，或者固定一个元素
document.addEventListener('scroll', function () {
//必须写在里面
// document.documentElement 是Html元素获取方式
const n=document.documentElement.scrollTop
console.log(n);
//得到的是数字型：不带单位
})
页面尺寸事件
1.resize(窗口尺寸改变的时候触发事件）
window.addEventListener('resize',function(){
//执行的代码
})
2.clientWidth和clientHeight(元素的可见部分宽高(不含边框，margin,滚动条等）
3.offsetWidth和offsetHeight(获取元素自身的宽高，包含元素自身设置的宽高，padding,border)
4.offsetTop和offsetLeft:
获取元素距离自己定位的父级元素的左，上距离
只读属性
4.element.getBoundingClientRect() （返回元素大小和相对于视口的位置）
总结
| 属性 | 作用 | 说明 |
|---|---|---|
| scrollLeft和scrollTop | 被卷去的头部和左侧 | 配合页面滚动来用，可读写 |
| clientWidth 和 clientHeight | 获得元素宽度和高度 | 不包含border,margin，滚动条 用于js获取元素大小，只读属性 |
| offsetWidth和offsetHeight | 获得元素宽度和高度 | 包含border、padding，滚动条等，只读 |
| offsetLeft和offsetTop | 获取元素距离自己定位父级元素的左，上距离 | 获取元素位置时使用，只读属性 |
