Target

• 能够说出什么是BOM
• 能够知道浏览器的顶级对象是window
• 能够写出页面加载事件以及注意事项
• 能够写出两种定时器函数并说出区别
• 能够说出JS执行机制
• 能够使用location完成页面之间的跳转
• 能够知晓navigator对象涉及的属性
• 能够使用history提供的方法实现页面刷新

BOM概述

什么是BOM?

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

BOM 的构成

• BOM 比DOM更大，它包含DOM
• window对象包含
  -- document
  -- location
  -- navigation
  -- screen
  -- history

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

1. 它是JS访问浏览器窗口的一个借口
2. 它是一个全局对象，定义在全局作用域中的变量， 函数都会变成window对象的属性和方法
   在调用的时候可以省略window, alert(), prompt()等都属于window对象方法
   注意： window下的一个特殊属性window.name

window对象的常见事件

窗口加载事件

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

1. window.onload是窗口（页面）加载事件， 当文档内容完全加载完成（包括图像，脚本文件，CSS文件等）会触发该事件。
2. window.onload是传统注册事件方法，如果有多个，最后一个会覆盖前面一个。如果想注册多个onload方法，可以使用addEventListener

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

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

调整窗口大小事件

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

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

定时器

两种定时器

window对象给我们提供了两个很好用的方法

• setTimeout()
• setInterval()

setTimeout()

window.setTimeout(调用函数，延迟的毫秒数）

setTimeout()方法用于设置一个定时器，该定时器在定时器到期后执行调用函数

JS执行机制

location对象

navigator对象

history 对象