页面滚动事件
滚动条在滚动的时候持续触发的事件
- window.addEventListener('scroll', function () { // 执行的操作 })
box的内容在进行滚动的时候
- box.addEventListener('scroll', function () { // 执行的操作 })
加载事件
- 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载
建议：后期业务处理之前，先添加load事件，保证所有资源全部加载完毕了
scroll家族
scroll事件
- scrollWidth/scrollHeight: - 获取元素的宽高值，包含 内容 + padding
- scrollTop, scrollLeft
- 获取被卷去的大小
- 尽量在scroll事件里面获取被卷去的距离
- 可读写
- scrollTop
- 获取垂直方向，被卷去头部距离
offset家族
- 可视宽高
- offsetWidth
- 包含width padding border
- offsetHeight注意:
获取的是可视宽高, 如果盒子是隐藏的,获取的结果是0
- 相对路径
- 相对于定位父容器的距离
- offsetLeft:当前元素相对于定准父容器的左侧距离
- offsetTop:当前元素相对于定准父容器的上侧距离
- 特征
- 获取出来的是数值,方便计算
- 只读属性,只能使用,不能设置
client家族 - 给window注册的事件
- window.resize
- window.onresize = function () {}
- clientWidth
- clientWidth
- clientTop
- clientLeft
- window.resize
