一、滚动事件和加载事件

1、滚动事件

• 定义：当页面进行滚动时触发的事件

• 事件名:scroll

• 代码：

• 给 window 或 document 添加 scroll 事件
  监听某个元素的内部滚动直接给某个元素加即可

2、加载事件

• 加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件
• 为什么要学?有些时候需要等页面资源全部处理完了做一些事情
• 老代码喜欢把 script 写在 head 中，这时候直接找 dom 元素找不到
• 事件名:load
• 监听页面所有资源加载完毕:给 window 添加 load 事件

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

3、resize

元素.addEventlistener('resize',function(){})

二、元素大小和位置

scroll家族

• 获取宽高:（不常用） 获取元素的内容总宽高(不包含滚动条)返回值不带单位scrollWidth和scrollHeight
• 获取位置:（常用scrollTop） 获取元素内容往左、往上滚出去看不到的距离
  scrollLeft和scrollTop
  这两个属性是可以修改的 -图解

• 代码

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

offset家族

• 获取宽高:（常用） 包含元素自身设置的宽高、padding、border
  offsetWidth和offsetHeight
• 获取位置:（不常用） 获取元素距离自己定位父级元素的左、上距离
  offsetLeft和offsetTop：注意是只读属性
• 图解

client家族

• 获取宽高:(不常用) 获取元素的可见部分宽高(不包含边框，滚动条等)\ clientWidth和clientHeight
• 获取位置:(不常用) 获取左边框和上边框宽度
  clientLeft和clientTop
  注意是只读属性

三、综合案例

注意点一： a的判断条件和执行代码的顺序之间的关系：尽可能把判断条件放在执行代码之前进行判断，若a的大小超出范围，及时修改a的大小，然后执行代码 若把判断条件放在执行代码之后，回过头来执行a++后，再执行代码，注意这个坑点

注意点二： 若一个某一元素有多个触发条件，并且这一元素的执行是有先后顺序的，注意将多个触发条件的执行顺序值统一

注意点三： 触发事件事件中的函数可以直接调用到其他的地方 举例：

注意点si：防止清除不了，越来越快