一.滚动事件和加载事件
1.滚动事件
- 当页面进行滚动时触发的事件
- 事件名 : scroll
- 监听整个页面滚动给 window 或 document 加
window.addEventListener('scroll', function () {
//执行的操作
})
document.addEventListener('scroll', function () {
//执行的操作
})
2.加载事件
2.1 load事件
- 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
- 事件名：load
- load 事件 : 可以等到页面加载以及外部资源(js文件、css文件、图片。。。)加载完成才执行js代码
- 监听页面所有资源加载完毕 load 只能给 window 给document添加无效
注意：不仅可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
window.addEventListener('load', function () {
// 执行的操作
})
2.2 DOMContentLoaded 事件
- 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、 图像等完全加载
- 事件名：DOMContentLoaded
- DOMContentLoaded 是给document注册
document.addEventListener('DOMContentLoaded', function () {
//执行的操作
})
二.元素的大小和位置
1.scroll家族
- 获取宽高:
scrollWidth和scrollHeight
获取元素的内容总宽高（不包含滚动条）返回值不带单位
只读属性 - 获取位置:
scrollLeft和scrollTop
获取元素内容往左、往上滚出去看不到的距离
这两个属性是可以修改的
1.png - 给页面注册滚动事件， 来获取页面的滚动卷曲距离
document.addEventListener('scroll',function () {
console.log(document.documentElement.scrollTop)
})
2.png
html的获取方式 document.documentElement
获取页面的滚动卷曲距离 document.documentElement.scrollTop
返回顶部 : document.documentElement.scrollTop = 0
2.offset家族
- 获取宽高：
offsetWidth和offsetHeight 获取元素的真实宽高、包含元素自身设置的宽高、padding、border -
获取位置：
offsetLeft和offsetTop 获取元素距离自己定位父级元素的左、上距离
定位父级如果没有的话，就是获取元素到body的距离
都是只读属性
3.png
3.client家族
- 获取宽高：
clientWidth和clientHeight
获取元素的可见部分宽高（不包含边框，滚动条等） 只读属性 - 获取位置：
clientLeft和clientTop
获取左边框和上边框宽度 只读属性 - resize事件 : 当浏览器大小发生改变的时候会触发该事件 ==> 可以用于获取页面可视区大小
// 当窗口变化的时候触发的事件
window.addEventListener('resize', function () {
//执行的代码
})
4.png
