（一）滚动事件和加载事件

一、滚动事件

1.当页面进行滚动式触发的事件

2.意义：很多网页需要检测用户吧页面滚动到某个区域后做一些处理，比如固定导航栏，比如返回顶部

3.事件名：scroll

4.监听整个页面滚动：window.addEventListener('scroll',function(){})

给window或document添加scroll事件

5.监听某个元素的内部滚动直接给某个元素加即可

二、加载事件

1.加载外部资源（如图片、外联CSS或JavaScript等）加载完毕时触发的事件

2.意义：①有些时候需要等页面资源全部处理完了做一些事情②老代码喜欢把script写在head中，这时候直接找dom元素找不到

3.事件名：load

4.监听页面所有资源加载完毕：window.addEventListeren('load',function(){})

给window添加load事件

5.注意：不光可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

6.当初始的HTML文档被完全加载和解析完成之后，DOMContentLoaded事件被触发，而无需等待样式表、图像等完全加载

7.事件名：DOMContentLoaded

8.监听页面DOM加载完毕：document.addEventListener('DOMContentLoaded',function(){})

给document添加DOMContentLoaded事件

（二）元素大小和位置

一、scroll家族

1、获取宽高

1）获取元素的内容总宽高（不包含滚动条）返回值不带单位

2）scrollWidth 和 scrollHeight

2、获取位置

1）获取元素内容往左、往上滚出去看不到的距离

2）scrollLeft 和 scrollTop

3）这两个属性是可以修改的

3、开发中，我们经常检测页面滚动的距离，比如页面滚动100像素，就可以显示一个元素，或者固定一个元素

4、注意事项：document.documentElement HTML 文档返回对象为HTML元素

二、offset家族

1、使用场景：前面案例滚动多少距离，都是我们自己算的，最好是页面滚动到某个元素，就可以做某些事。简单说，就是通过js的方式，得到元素在页面中的位置，这样我们可以做，页面滚动到这个位置，就可以返回顶部的小盒子显示…

2、获取宽高：

1）获取元素的自身宽高、包含元素自身设置的宽高、padding、border

2）offsetWidth 和 offsetHeight

3、获取位置：

1）获取元素距离自己定位的父级元素的左、上距离

2）offsetLeft 和 offsetTop 注意是只读属性

三、client家族

1、获取宽高：

1）获取元素的可见部分宽高（不包含边框，滚动条等）

2）clientWidth 和 clientHeight

2、获取位置：

1）获取左边框和上边框宽度

2）clientLeft 和 clientTop 注意是只读属性

3、会在窗口尺寸改变的时候触发事件

1）resize

4、检测屏幕宽度

四、总结

1、offset家族

1）获取元素自身大小：包括自身设置的宽高、padding、border

2）获取元素距离定位父级的左和上距离 只读属性

2、client家族

1）获取元素可见区域的大小

2）获取元素左、上边框距离 只读属性

3、scroll家族

1）获取元素内容的总大小

2） 获取元素向左向上滚出去看不见的 距离 可读写属性