一、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 浏览器大小发生改变