其他事件
页面加载事件
加载外部资源加载完毕时触发的事件
- 事件名:load
监听页面所有资源加载完毕:
给window添加load事件
语法:window.addEventListener('load',function() {执行的操作})
注意:不仅可以监听整个页面资源加载完毕,也阔以针对某个资源绑定load事件 - 当初始的HTML文档被完全加载和解析完成之后,DOMContentLoaded事件被触发,而无需等待样式表、图片等完全加载
事件名:DOMContentLoaded
监听页面DOM加载完毕:
给document添加DOMContentLoaded事件
语法:document.addEventListener('DOMContentLoaded',function() {执行的操作})
元素滚动事件
滚动条在滚动的时候持续触发的事件
事件名:scroll
监听整个页面滚动:
语法:window.addEventListener('scroll',function() {执行的操作})
获取位置
属性:scrollLeft、scrollTop
获取元素内容往左、往上滚出去看不到的距离
获得的值是数字型,可读写
尽量在scroll事件里面获取被卷去的距离
语法:
div.addEventListener('scroll',function() {
console.log(this.scrollTop)
})
页面尺寸事件
会在窗口尺寸改变的时候触发事件
事件名:resize
语法:window.addEventListener('resize', function() {执行的代码})
检测屏幕宽度:
window.addEvnetListener('resize', function(){
let w = document.documentElement.clientWidth
console.log(w)
})
获取元素宽高
属性:clientWidth、clientHeight