页面加载事件、页面滚动事件、页面尺寸事件

一、页面加载事件

        加载外部资源（如图片、外联CSS、JS等），加载完毕时触发的事件。

        load：window.addEventListener('load',function() { }) ==> 监听页面所有资源加载完毕。

        DOMContentLoaded：window.addEventListener('DOMContentLoaded',function() { }) ==> 当初始的HTML文档被完全加载和解析之后就触发，无需等待样式表、图像等完全加载。

二、页面滚动事件

        滚动条在滚动时持续触发的事件。

        window.addEventListener('scroll',function() { })  ==> 给window添加滚动条监听事件

        也可给document、某个元素内部滚动添加。

        1、scrollLeft / scrollTop 

                被卷去的左侧和头部，是可读写的

        2、让滚动条丝滑滚动

html {
    scroll-behavior: smooth;
}

三、页面尺寸事件 

        在窗口尺寸发生改变的时候触发。

        window.addEventListener('resize',function() { }) 

        clientWidth / clientHeight：获取元素的可见部分宽高（不含margin、border、滚动条等）。

        offsetWidth / offsetHeight：获取元素的自身宽高，包含元素自身设置的宽高、padding、border，只读。

        offsetLeft / offsetTop：获取元素距离自己定位父级元素的左、上距离，与绝对定位类似，只读。 

        offse如果父级没有定位，则以浏览器文档为准，返回的是不带单位的数字。