BOM（上）

1.什么是BOM

BOM（Browser Object Model）是浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其顶级对象是 window，所有和BOM相关的API都是window.xxx。BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

另外，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，而BOM 缺乏标准。

简单理解就是：BOM是把浏览器当作一个对象看待，学习的是浏览器窗口交互的一些对象，没有标准，所以兼容性差。

1.1 BOM的构成

BOM比DOM大，它包含DOM。

1.2 注意点

window 对象是浏览器的顶级对象，它具有双重角色。
① 它是 JS 访问浏览器窗口的一个接口。
② 它是一个全局对象。定义在全局作用域中的变量、函数都会变成 window 对象的属性和方法。
在调用的时候可以省略 window，前面学习的弹出框都属于 window 对象的方法，如 alert()、prompt() 等。

2.window 对象的常见事件

2.1 窗口加载事件

window.onload = function(){}
或者 
window.addEventListener("load",function(){});

window.onload 是窗口 (页面）加载事件,有了这个事件，我们就可以把 JS 代码写到页面元素的上方，因为 onload 是等页面内容（(包括图像、脚本文件、CSS文件等）全部加载完毕，再去执行处理函数。

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

 DOMContentLoaded 事件，仅当DOM加载完成，不包括样式表，图片，flash等等，就去执行处理函数，所以执行效率高于window.onload，用户体验也相对更好，如果页面的图片很多的话，推荐使用这个事件。

2.2 调整窗口大小事件

window.onresize = function(){}
或者
window.addEventListener("resize",function(){});

 window.onresize 是调整窗口大小加载事件, 只要窗口大小发生像素变化，就会触发这个事件，我们经常利用这个事件结合window.innerWidth完成响应式布局。

(1）可视化窗口大小

① window.clientWidth 和  window.innerWidth 表示可视窗口的宽度
② window.clientHeight 和  window.innerHeight 表示可视窗口的宽度

(2）外部窗口大小，包括可视区和工具栏、侧边的设置等等

window.outerWidth 和  window.outerHeight 表示浏览器整个尺寸大小；

<style>
    div {
        width: 200px;
        height: 200px;
        background-color: pink;
    }
</style>
<script>
     // 因为<script>标签写在页面内容的上方，所以需要先绑定窗口加载事件，由于这里没有图片，使用 
        window.onload也是无妨的
    window.addEventListener('load', function() {
        var div = document.querySelector('div');
        // 利用window.onresize 事件实现响应式布局
        window.addEventListener('resize', function() {
            if (window.innerWidth <= 800) { // 若可视窗口宽度小于等于800px，就改div背景色为紫色
                div.style.backgroundColor = 'purple';
            } else {
                didiv.style.backgroundColor = 'pink';  
            }
        })
    })
</script>
<div></div>

3. 定时器

window 对象给我们提供了 2 个非常好用的定时器方法。
① setTimeout() ；
② setInterval() ；

3.1 setTimeout() 定时器

window.setTimeout(调用函数, [延迟的毫秒数]);

setTimeout() 方法用于设置一个定时器，该定时器表示在设置的延迟时间后，执行调用函数。

注意点：

① window 可以省略。

② 延迟的毫秒数默认是 0，单位是毫秒。

③ 这个调用函数可以直接写函数，或者写函数名，如下所示：

// 1. 调用函数可以直接写函数
setTimeout(function() {
    // 执行代码
}, 1000);
// 2. 调用函数可以写函数名
setTimeout(move, 1000);
function move() {
    // 执行代码
}

④ 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符，如下：

// 这里变量timer就是这个定时器的标识符
var timer = setTimeout(function() {
    // 执行代码
}, 2000);

（1）回调函数 callback

setTimeout() 方法里面的这个调用函数我们称为回调函数 callback。

普通函数是按照代码顺序直接调用。而这个函数，需要等待时间，时间到了才去调用这个函数，因此称为回调函数。
简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。

3.2 停止 setTimeout() 定时器

 window.clearTimeout(timeoutID);  // timeoutID表示的就是定时器的标识符

注意点：

① window 可以省略。

② 里面的参数（timeoutID）就是定时器的标识符 。

 3.3 setInterval() 定时器

window.setInterval(回调函数, [间隔的毫秒数]);

setInterval() 方法重复调用一个函数，该定时器表示每隔设置的毫秒数，就去调用一次回调函数。

注意点：

① window 可以省略。

② 延迟的毫秒数默认是 0，单位是毫秒。

③ 这个调用函数可以直接写函数，或者写函数名，和setTimeout() 方法一样。

④ 经常给定时器赋值一个标识符，和setTimeout() 方法一样。

⑤ 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次。

// 设置了一个标识符为timer的定时器，该定时器每隔2秒打印一句'我真开心'
var timer=setInterval(function(){
    console.log('我真开心~');
},2000)

3.4 停止 setInterval() 定时器 

window.clearInterval(intervalID);  // intervalID表示的是定时器的标识符

注意点：

① window 可以省略。

② 里面的参数（intervalID）就是定时器的标识符 。

通过两个定时器的介绍，可以发现setTimeout() 方法是过多少秒后才执行回调函数，并且只执行一次；而setInterval() 方法是每隔多少秒就执行一次，是重复动作。除了实现的功能上有差别，其使用和注意点基本一致。定时器可以说是BOM里面最重要的方法之一了，实际开发中经常使用，最常见到的就是轮播图的自动播放，这就是利用了setInterval() 定时器实现的。