JS-BOM Window 对象

共计 667 个字符，预计需要花费 2 分钟才能阅读完成。

窗口加载事件

一、

    window.onload = function() {

    }

    window.addEventListener('load', function () {

    })

window.onload 是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图像、脚本文件、CSS文件等），就调用的处理函数

1. 有了 window.onload 就可以把JS代码写道页面元素的上方，因为 onload 是等页面内容完全加载完毕，再去执行处理函数
2. window.onload 传统注册方式只能写一次，如果有多个，会以最后一个 window.onload 为准
3. 如果使用 addEventListener 则没有限制

二、

    document.addEventListener('DOMContentLoaded', function () {

    })

DOMContentLoaded 事件触发时，仅当DOM加载完毕，不包括样式表、图片、flash等等

1. IE9 以上才支持
2. 如果页面的图片很多的话，从用户访问到 onload 触发可能需要较长的时间，交互效果就不能实现，必然影响到用户的体验，此时用 DOMContentLoaded 事件比较合适

调整窗口大小事件

    window.onresize = function () {

    }

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

    })

window.onresize 是浏览器窗口大小加载事件，当触发时就调用的处理函数

1. 只要窗口大小发生像素变化，就会触发这个事件
2. 经常利用这个事件完成响应式布局
3. window.innerWidth 当前屏幕的宽度