1.scroll滚动事件
当页面滚动时触发
可以给 window 或 document 添加
window.addEventListener('scroll', function () {
console.log('页面滚动')
})
2.load加载事件
load 事件可以给window注册 给资源注册
等页面结构及外部资源(js文件、css文件、图片等)全加载完成才执行js代码
window.addEventListener('load', function () {
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('点了')
})
})
let pic = document.querySelector('.pic');
console.log(pic.width) //0
pic.addEventListener('load', function () {
console.log(pic.width) //600
})
DOMContentLoaded 事件是给document注册的
当HTML文档加载和解析完成之后，DOMContentLoaded 事件就被触发，无需等待外部资源加载
document.addEventListener('DOMContentLoaded', function () {
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('点了')
})
})
3.scroll家族
scrollWidth scrollHeight 获取元素内容 宽高 只读属性 返回纯数值
scrollLeft scrollTop 获取内容滚动卷曲距离 可修改属性 返回纯数值
document.documentElement.scrollTop获得当前页面被卷去的头部
4.offset家族
offsetWidth offsetHeight 获取元素真实的宽高 包含边框
offsetLeft offsetTop 获取元素距离定位父级元素的 左 上 距离 定位父级如果没有的话，就是获取元素到body的距离
都是只读属性，修改无效
5.client家族
clientWidth clientHeight 获取元素可视区大小 不包含边框
lientLeft clientTop 左边框宽度和上边边框宽度
都是只读属性
clientWidth clientHeight会在窗口尺寸改变的时候触发resize事件
// 当窗口变化的时候触发的事件
window.addEventListener('resize', function () {
// 页面可视区大小
let w = document.documentElement.clientWidth
if (w >= 1200) {
document.body.style.backgroundColor = 'lime'
} else if (w >= 750) {
document.body.style.backgroundColor = 'hotpink'
} else {
document.body.style.backgroundColor = 'yellow'
}
})
6.给window注册的事件
load 加载事件
scroll 滚动事件
resize 浏览器大小发生改变
