一、DOM- 网页特效篇
- 滚动事件
当页面进行滚动时触发的事件
监听整个页面滚动给 window 或 document 加
语法：
document.addEventListener('scroll', function () {
//执行的操作
})
- 加载事件
1.加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
事件名：load
给 window 添加 load 事件
监听页面所有资源加载完毕：
window.addEventListener('load', function () {
//执行的操作
})
不仅可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件
// 1. 需求：获取图片的宽度
// 资源注册 load事件
// let pic = document.querySelector('.pic')
// console.log(pic.width) // 0
// // 资源加载完毕了，就可以去获取图片的宽度 ==> 给图片资源注册load加载事件
pic.addEventListener('load', function () {
console.log(pic.width) // 600
})
2.当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、 图像等完全加载
事件名：DOMContentLoaded
DOMContentLoaded 是给document注册
// 2. 给页面注册 DOMContentLoaded 事件
// 注意：load 是给window注册，DOMContentLoaded 是给document注册
document.addEventListener('DOMContentLoaded', function () {
let div = document.querySelector('div')
div.addEventListener('click', function () {
alert('点了')
})
})
二、元素大小和位置
- scroll家族
scrollWidth scrollHeight 获取元素内容 宽高 （了解） 返回纯数值，可以直接参与运算
scrollWidth scrollHeight 是只读属性（赋值无效）
不包含滚动条
scrollLeft scrollTop 获取内容滚动卷曲距离
scrollTop 获取内容垂直方向上的滚动卷曲距离
scrollLeft 获取内容水平方向上的滚动卷曲距离
可以修改
- offset家族
offsetWidth offsetHeight 获取元素真实的宽高（内容 + padding + border)
offsetLeft offsetTop 获取元素距离定位父级元素的 左 上距离
定位父级如果没有的话，就是获取 元素到body的距离（文档左上角）
- client家族
clientWidth clientHeight 获取元素可视区大小 不包含边框
clientLeft和clientTop 获取左边框和上边框宽度
- resize事件
当浏览器大小发生改变的时候会触发该事件 ==> 可以用于获取页面可视区大小
window.addEventListener('resize', function () {
console.log(document.documentElement.clientWidth)
console.log(document.documentElement.clientHeight)
})
- 补充小知识点
给页面注册事件，到底给window还是document
给window注册的事件
1. load 加载事件
2. scroll 滚动事件
3. resize 浏览器大小发生改变
