BOM,什么是BOM?

4.BOM

4.1 什么是BOM?

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是 window。
​
BOM 由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。
​
BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，`DOM 的`标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分。

	DOM	BOM
对象模型	文档	浏览器
怎么看待	把[文档]当做一个[对象]来看待	把[浏览器]当做一个[对象]来看待
顶级对象	document	window
主要学习	操作页面元素	浏览器窗口交互的一些对象
标准规范	W3C	浏览器厂商在各自浏览器上定义的，兼容性较差

 4.2. BOM的构成

BOM 比 DOM 更大，它包含 DOM。

 

4.3. 顶级对象window

window 对象是浏览器的顶级对象，它具有双重角色。

1. 它是 JS 访问浏览器窗口的一个接口。
2. 它是一个全局对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法。

在调用的时候可以省略window,前面学习的对话框都属于window 对象方法，如 alert() 、prompt()等

注意：window 下的一个特殊属性 window.name

4.4. window对象的常见事件

页面（窗口）加载事件（2种）

第1种

window.onload = function(){}
/*或者*/
window.addEventListerner("load",function(){});

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

注意：

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

第2种

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

DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式表，图片，flash等等。
​
IE9以上才支持！！！
​
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现，必然影响用户的体验，此时用 DOMContentLoaded 事件比较合适。

    点击

调整窗口大小事件

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

window.onresize /*是调整窗口大小加载事件,  当触发时就调用的处理函数。*/

注意：

1. 只要窗口大小发生像素变化，就会触发这个事件。

2. 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度

4.5. 定时器（两种）

window 对象给我们提供了 2 个非常好用的方法-定时器。

• setTimeout()

• setInterval()

setTimeout() 炸弹定时器

开启定时器

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

setTimeout() 这个调用函数我们也称为回调函数  callback 

注意： 

1. window 可以省略。
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()’三种形式，第三种不推荐
3. 延迟的毫秒数省略默认是0，如果写，必须是毫秒
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符

普通函数是按照代码顺序直接调用。
​
简单理解： 回调，就是回头调用的意思。上一件事干完，再回头再调用这个函数。
例如：定时器中的调用函数，事件处理函数，也是回调函数。
​
以前我们讲的   element.onclick = function(){}   或者  element.addEventListener(“click”, fn);   里面的 函数也是回调函数。

代码示例

案例：5秒后关闭广告

停止定时器

window.clearTimeout(timeoutID)

clearTimeout() 方法取消了先前通过调用 setTimeout() 建立的定时器

注意： 

1. window 可以省略
2. 里面的参数就是定时器的标识符

点击停止定时器
    

setInterval() 闹钟定时器

开启定时器

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

setInterval() 方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

1. window 可以省略
2. 这个调用函数可以直接写函数，或者写函数名或者采取字符串‘函数名()’三种形式
3. 间隔的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就自动调用这个函数
4. 因为定时器可能有很多，所以我们经常给定时器赋值一个标识符
5. 第一次执行也是间隔毫秒数之后执行，之后每隔毫秒数就执行一次

案例：倒计时

 

        1
        2
        3
    
    

 

停止定时器

window.clearInterval(intervalID);

clearInterval() 方法取消了先前通过调用 setInterval() 建立的定时器

注意： 

1. window 可以省略
2. 里面的参数就是定时器的标识符

案例：发送短信倒计时

点击按钮后，该按钮60秒之内不能再次点击，防止重复发送短信。

 

 

手机号码：  发送