JavaScript基础——滚动事件、加载事件、三大家族

一、滚动事件和加载事件

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'
}
})