一、滚动事件和加载事件
1.1 滚动事件
当页面滚动时触发的事件
事件名:scroll
样例,监听整个页面滚动:
window.addEventListener('scroll',funtion(){
//执行操作
})
可以给window或者document添加
scroll
事件
1.2 加载事件
加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
事件名:load
监听页面所有资源加载完毕
window.addEventListener('load',function(){
//执行操作
})
当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被处罚,而无需等待样式表、图像等完全加载
事件名:DOMContentLoaded
监听页面DOM加载完毕
document.addEventListener('DOMContentLoaded',function(){
//执行操作
})
两个加载事件的区别
load事件
给window加,监听整个页面资源,
DOMContentLoaded
给document加,当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图像等完全加载
二、三大家族
2.1 scroll家族
作用:scroll可以检测页面滚动的距离
获取宽高
- 获取元素的内容总宽高(不包含滚动条),返回值不带单位
- 元素.scrollWidth和元素.scrollHeight
获取位置
- 获取元素内容往左、网上滚动看不到的距离(被卷去的头部和左侧的距离)
- .scrollLeft 和 .scrollTop
- 元素的这两个属性可以直接修改
样例代码:
let div = document.querySelector('div')
console.log(div.scrollWidth)
div.addEventListener('scroll',function(){
console.log(this.scrollTop)
})
检测页面滚动事件
window.addEventListener('scroll',function(){
let num = document.documentElement.scrollTop
console.log(num)
})
documentElement 也就是指 html
2.2 offset家族
简单的说就是通过js的方式,得到元素在当前页面中的位置
获取宽高
- 获取元素的自身宽高、包含元素自身设置的宽高、padding、border等
- .offsetWidth 和 .offsetHeight
获取位置
- 获取元素距离自己定位父级元素(若没有,默认文档的左上角)的左、上距离
- offsetLeft 和 offsetTop 是
只读
属性
获取位置
2.3 client家族
获取宽高
- 获取元素的可见部分的宽高(不包含边框、滚动条等)
- .clientWidth 和 .clientHeight
- 只读属性
获取位置
样例代码,根据网页大小变化改变背景颜色
window.addEventListener('resize',function(){
let w = document.documentElement.clientWidth
if(w >= 1920){
document.body.style.backgroundColor = 'pink'
}
else if(w?540){
document.body.style.backgroundColor = 'hotpink'
}
else{
document.body.style.backgroundColor = 'deeppink'
}
})