滚动事件和加载事件
滚动事件
场景:当页面进行滚动时触发的事件
事件名: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)
})
原文地址:https://www.jb51.cc/wenti/3285157.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。