页面滚动事件scroll

给某个元素来注册
更多的是给页面注册window 或者 document

页面加载事件

1.load，资源加载完毕事件（包含图像和视频内容）
给 window 注册
当页面加载 还要等页面中引用外部资源（img、css、js文件）加载完成才执行
2.DOMContentLoaded
给 document 注册
当页面加载完成就来执行，不等外部资源的加载
3.当js代码写在head标签中，会导致元素获取不到，js代码 写在load 或者 DOMContentLoaded里面

三大家族

offset家族（只读属性）

offsetWidth-返回容器宽度（包含滚动条） offsetHeight 获取元素自身真实宽高大小
offsetLeft offsetTop 获取元素到定位父级之间的距离 （如果定位父级不存在，获取的是到body的距离）

scroll家族

scrollWidth scrollHeight 获取元素内容的宽高大小 只读属性
scrollLeft-返回左侧滚动的距离 scrollTop 获取滚动卷曲距离
1.获取页面滚动卷曲距离
2.通过html的scrollTop来获取
3.document.documentElement.scrollTop，设置页面滚动距离，过渡属性对其无效
4.不仅可以获取，还可以设置（document.documentElement.scrollTop = 0） 返回顶部

client家族（只读属性）

clientWidth clientHeight 获取元素 可视区 的大小
clientLeft clientTop 获取 元素左 上 边框大小
resize 页面大小改变事件 当浏览器窗口大小发生改变的时候就会触发该事件

window注册事件
1.load
2.scroll
3.resize

clientX clientY 获取鼠标到可视区的位置

类名操作
classList的add方法可以用来添加类名，不会对已有类名造成覆盖问题
classList的toggle方法可以用来切换类名
通过操作类名的方式可以用来修改元素的样式