window对象（未完）

什么是window对象

所有浏览器都支持 window 对象，它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性，全局函数是 window 对象的方法，甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window对象的常见事件

1. onload，当页面加载完毕后执行该方法。 a标签的超链接、 F5或者刷新按钮（强制刷新）、前进后退按钮。

   注：火狐有个特点，有个“往返缓存”，这个缓存中不仅保存这页面数据，还保存了DOM和JavaScript的状态；实际上就是将整个页面都保存再了内存里，所以此时后退按钮就不能刷新页面了。

2. onpageshow 这个事件再页面显示时触发，无论页面是否来自缓存，再重新加载页面中， pageshow会再load事件触发后再触发，更具事件对象中的persisted来判断是否缓存中的页面触发的pageshow事件，注意这个事件给window添加。

3. onDOMContentLoaded 当DOM元素加载完毕后就执行

4. onresize 调整窗口大小加载该事件，只要窗口大小发生改变，就会触发这个事件，我们经常利用这个事件完成响应式布局，使用 window.innerWidth/Height获得当前屏幕的宽度/高度

5. devicePixelRatio 获得当前的物理像素比。

window 监听事件

1. window.addEventListener('scroll', fn); 页面滚动的时候执行函数fn，如页面即将滚动到底部，动态加载后面的数据。

function addEvent() {
    window.addEventListener('scroll', function() {
        // 可视窗口高度
        var clientHeight = document.documentElement.clientHeight;
        // 滚动区域高度
        var scrollHeight = document.body.scrollHeight;
        // 页面滚过可视窗顶部高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        
        var proDis = 30;
        // 页面即将出现在可视区的时候
        if ( (scrollTop + slientHeight) >= (scrollHeight - proDis) ) {
            // 获取需要加载的数据
        }
    })
}