滚动事件和加载事件
一、滚动事件
页面滚动时触发事件
事件名：scroll
//页面滚动事件
window.addEventlistener('click',function(){
//执行操作
})
二、加载事件
1.加载外部资源（如图片、外联css和JavaScript等）加载完毕时触发事件
事件名：load
监听页面所有资源加载完毕：
给window添加load事件
//页面加载事件
window.addEventlistener('load',function(){
//执行操作
})
不光可以监听整个页面资源加载完毕，也可以针对，某个资源绑定加载事件
2.当初始的HTML文档被完全加载解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载
事件名：DOMContentLoaded
监听页面DOM加载完毕：
给document添加DOMContentLoaded事件
document.addEventListener('DOMContentLoaded',function(){
//执行操作
})
元素大小和位置
一、scroll家族
1.获取宽高
获取元素的内容总宽高（不包含滚动条），返回值不带单位
scrollWidth和scrollHeight
2.获取位置
获取元素内容往左、网上滚出去看不到的距离
scrollLeft和scrollTop，这两个属性是可以修改的
div.addEventListener('scroll',function(){
console.log(this.scrollTop)
})
开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素
//页面滚动事件
window.addEventListener('scroll',function(){
//document.documentElement.scrollTop 获取当前页面被卷去的头部
let num = document.documentElement.scrollTop
console.log(num)
})
二、offset家族
1.获取宽高
- 获取元素自身宽高，包含元素自身设置的宽高、padding、border
- offsetWidth和offsetHeight
2.获取位置
- 获取元素距离自己定位父级元素的左、上距离
- offsetLeft和offsetTop，如果没有定位，则以文档左上角为准
三、client家族
1.获取宽高
- 获取元素可见部分宽高，不包含边框、滚动条等
- clientWidth和clientHeight
2.获取位置
- 获取左边框和上边框的宽度，只限左、上边框
- clientLeft和clientTop
3.窗口尺寸改变时触发事件
属性名：resize
window.addEventListener('resize',function(){
//执行操作
})
检测屏幕宽度
window.addEventListener('resize',function(){
let w = docment.docmentElement.clientWidth
console.log(w)
})
四、scroll、offset、client总结
scrollWidth：获取容器的宽度，不包含滚动条，边框等，但包含滚动的区域（不可视区域）
offsetWidth：获取可视区域的宽度，包含滚动条
clientWidth：获取可视区域宽度，不包含滚动条
scrollLeft：获取左侧滚动的距离
offsetLeft：获取和已经定位的父级元素的左距离，若没有定位，以文档左上角为准
clientLeft：获取左边框宽度
