BOM详细介绍

1.BOM概述

---

1.1-什么是BOM

BOM（Browser Object Model）即浏览器对象模型，它提供独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。

BOM缺乏标准，javascript语法的标准化组织是ECMA,BOM的标准化组织是W3C,BOM最初是Netscape浏览器标准的一部分。

BOM	DOM
浏览器对象模型	文档对象模型
把浏览器当做一个对象看待	把文档当做一个对象看待
BOM的顶级对象是window	DOM的顶级对象是document
浏览器窗口交互的一些对象	操作页面的元素
浏览器厂商各自浏览器定义的，兼容性较差	W3C标准

1.2-BOM的构成

BOM比DOM大，它包含DOM

window对象是浏览器的顶级对象,它具有双重角色。
1.它是js访问浏览器的一个窗口。
2.它是一个全局对象。定义在全局作用域中的变量、函数都会变成window对象的属性和方法。在调用的时候可以省略window,alert()、prompt()都属于window的对象方法。

注意：window下的一个特殊属性window.name
不建议在全局下var name

---

2.window对象常见的事件

---

2.1-窗口加载事件

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

window.onload是窗口（页面）加载事件，当文档内容完全加载完成会触发该事件（包括图象、脚本文件、css文件等），就调用处理函数。
注意：window.onload传统注册事件方式只能写一次，如果有多个，会以最后一个window.onload为准。而window.addEventListener不存在冲突问题。

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

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

2.2-调整窗口大小事件

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

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

---

3.定时器

---

3.1-两种定时器

setTimeout(function(){