滚动事件和加载事件
滚动事件
场景:当页面进行滚动时触发的事件
事件名:scroll
监听整个页面的滚动:
//页面滚动事件
window.addEventListener('scroll',function(){
//执行的操作
})
给window或document添加scroll事件
加载资源
场景:加载外部资源(如图片,外联css和JavaScript等),加载完毕时触发的事件
事件名:load
监听页面所有资源加载完毕:
给window添加load事件
//页面加载事件
window.addEventListener('load',function(){
//执行的操作
})
注意:不光可以监听整个页面资源加载完毕,也可以针对某个资源绑定load事件
当初始的html文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表,图像等完全加载
事件名:DOMContentLoaded
监听页面DOM加载完毕:
给document添加DOMContentLoaded事件
document.addEventLister('DOMContentLoaded',function(){
//执行的操作
})
元素大小和位置
scroll家族
使用场景:使用scroll来检测页面滚动的距离
获取宽高:
1.获取元素的内容总宽高(不包含滚动条),返回值不带单位
2.scrollWidth和scrollHeight
获取位置:
1.获取元素内容往左,往上滚出去看不到的距离
2.scrollLeft和scrollTop
3.这两个属性是可以修改的
div.addEventListener('scroll',function(){
console.log(this.scrollTop)
})
document.documentElememt
offset家族
使用场景:当页面滚动到某个元素,就可以做某些事情
获取宽高:
1.获取元素的自身宽高,包含元素自身设置的宽高,padding,border
2.offsetWidth和offsetHeight
获取位置:
1.获取元素距离自己定位父级元素的左,上距离
2.offsetLeft和offsetTop 注意是只读属性
client家族
获取宽高:
1.获取元素的可见部分宽高(不包含边框,滚动条等)
2.clientWidth和clientHeight
获取位置:
1.获取左边框和上边框宽度
2.clientLeft和clientTop 注意是只读属性
会在窗口尺寸改变的时候触发事件:
resize
window,addEventListener('resize',function(){
// 执行代码
})
检测屏幕宽度:
window.addEventListener('resize',function(){
let w = document.documentElement.clientWidth
console.log(w)
})