一.滚动事件和加载事件

1.滚动事件

• 当页面进行滚动时触发的事件
• 事件名 : scroll
• 监听整个页面滚动给 window 或 document 加

        window.addEventListener('scroll', function () {
            //执行的操作
        })
        document.addEventListener('scroll', function () {
            //执行的操作
        })

2.加载事件

2.1 load事件

• 加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件
• 事件名：load
• load 事件 : 可以等到页面加载以及外部资源(js文件、css文件、图片。。。)加载完成才执行js代码
• 监听页面所有资源加载完毕 load 只能给 window 给document添加无效
  注意：不仅可以监听整个页面资源加载完毕，也可以针对某个资源绑定load事件

    window.addEventListener('load', function () {
         // 执行的操作
        })

2.2 DOMContentLoaded 事件

• 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、 图像等完全加载
• 事件名：DOMContentLoaded
• DOMContentLoaded 是给document注册

   document.addEventListener('DOMContentLoaded', function () {
         //执行的操作
        })

二.元素的大小和位置

1.scroll家族

• 获取宽高:
  scrollWidth和scrollHeight
  获取元素的内容总宽高（不包含滚动条）返回值不带单位
  只读属性
• 获取位置:
  scrollLeft和scrollTop
  获取元素内容往左、往上滚出去看不到的距离
  这两个属性是可以修改的
  
  1.png
• 给页面注册滚动事件， 来获取页面的滚动卷曲距离

        document.addEventListener('scroll',function () {
            console.log(document.documentElement.scrollTop)
        })

2.png

2.offset家族

• 获取宽高：
  offsetWidth和offsetHeight 获取元素的真实宽高、包含元素自身设置的宽高、padding、border

• 获取位置：
  offsetLeft和offsetTop 获取元素距离自己定位父级元素的左、上距离
  定位父级如果没有的话，就是获取元素到body的距离
  都是只读属性

  
  
  3.png

3.client家族

• 获取宽高：
  clientWidth和clientHeight
  获取元素的可见部分宽高（不包含边框，滚动条等） 只读属性
• 获取位置：
  clientLeft和clientTop
  获取左边框和上边框宽度 只读属性
• resize事件 : 当浏览器大小发生改变的时候会触发该事件 ==> 可以用于获取页面可视区大小

     // 当窗口变化的时候触发的事件
        window.addEventListener('resize', function () {
          //执行的代码
        })

4.png