【API】页面加载事件 页面滚动事件 页面尺寸事件

页面加载事件

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

        如果将script卸载head中，会导致直接找DOM元素找不到出错。

事件名：load

监听页面所有资源加载完毕：给window添加load事件

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

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

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

事件名：DOMContentLoaded

监听页面DOM加载完毕：给document添加DOMContentLoaded事件

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

页面滚动事件

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

        很多页面需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部等

事件名：scroll

监听整个页面的滚动

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

可以使用scroll检测页面滚动的距离，设置页面滚动100px后会显示某个元素等。

scrollTop 和 scrollLeft（属性）

获取被卷去的大小（获取元素内容往上、左滚出去看不到的距离），这两个值是可读写的。

获取html元素：document.documentElement

检测页面滚动的头部距离（被卷去的头部）：document.documentElement.scrollTop

页面尺寸事件

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

事件名：resize

检测屏幕宽度：

        获取宽高：

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

        clientWidth和clientHeight

元素尺寸于位置-尺寸

获取宽高：

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

        offsetWidth和offsetHeight  只读属性

        获取出来的是数值，方便计算

注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0

获取位置：

        offsetLeft和offsetTop  注意是只读属性

        获取元素距离自己定位父级元素的左、上距离（最近一级带有定为的祖先元素）

获取位置：

        element.getBoundingClientRect()

        方法返回元素的大小及其相对于视口的位置