自学阶段四Webapis基础—Day5

一、滚动事件和加载事件

滚动事件

事件类型：scroll

作用：监听页面或元素的滚动

滚动的前提：内容有足够的宽或高以产生滚动条

scroll可以给window和document加
    window.add...
    document.add...

加载事件

结论：建议大家将代码写到load事件中，保证代码是在资源加载完毕的情况下运行

事件类型：load

作用：监听页面的资源或者元素内容是否加载完毕，以便在进行操作的时候，有相应的资源

页面dom及所有外部资源都加载完毕才触发

DOMContentLoaded ：

1. 当dom结构解析完毕之后就会触发
2. 它会在load之前触发

二、三大家族

scroll家族
    获取宽高：内容宽度 content+padding
             获取元素的内容总宽高（不包含滚动条）返回值不带单
             位
             只读属性
    获取位置：获取页面滚动出屏幕的距离，主要是关注垂直方向上的
             距离
             scrollTop:可以获取垂直方向页面滚动出屏幕的距离
             可以取值 也可以赋值

offset家族
    获取宽高：内容宽度 content+padding+border
             获取元素的真实宽高、包含元素自身设置的宽高、
             padding、border
    获取位置:获取子元素相对于定位父级元素的距离
             offsetLeft offsetTop:元素离文档顶部的距离
             细节：如果没有定位父容器，则参照文档左上角

client
    获取宽高：内容宽度 content+padding
             获取元素的可见部分宽高（不包含边框，滚动条等）
    获取位置：clientLeft:获取左边框的宽度
             clientTop:获取上边框的宽度

window.getCompoutedStyle(元素,null)获取元素的所有样式

三大家族小结:

1. scroll家族

   获取元素内容的总大小 只读属性

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

2. offset家族

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

   offsetLeft offsetTop 获取元素距离定位父级的左和上距离

   都是只读属性

3. client家族

   获取元素可见区域的大小

   获取元素左、上边框距离

   都是只读属性