JavaScript是一门脚本语言，需要依赖运行环境。
其中非常重要的运行环境就是浏览器，而且浏览器本身又作为一个应用程序需要对其本身进行操作，所以通常浏览器会有对应的对象模型（BOM）。
我们可以将BOM看成是连接JavaScript脚本与浏览器窗口的桥梁/接口。
DOM为JavaScript脚本与html文档的桥梁/接口。
什么是BOM？
BOM（Browser Object Model）即浏览器对象模型，用于与浏览器窗口进行交互 核心对象为window，可用console.dir(window)查看window的属性和方法，BOM包含了DOM
BOM 主要包括以下的对象模型：
-
window：包括全局属性、方法，控制浏览器窗口相关的属性、方法；
-
location：浏览器连接到的对象的位置（URL）；
-
history：操作浏览器的历史；
-
document：当前窗口操作文档的对象；
window对象在浏览器中有两个身份：
身份一：全局对象。我们知道ECMAScript其实是有一个全局对象的，这个全局对象在Node中是global；比如默认给我们提供了全局的函数和类：setTimeout、Math、Date、Object等；比如在全局通过var声明的变量，会被添加到GO中，也就是会被添加到window上；
身份二：浏览器窗口对象。作为浏览器窗口时，提供了对浏览器操作的相关的API
DOM和BOM的区别
window对象
| 页面加载事件 | |
|---|---|
| load | DOM全部加载完成 |
| DOMContentLoaded | 仅当DOM加载完成，不包括样式表，图片，flash等，ie9以上支持 |
| 调整窗口 | |
| resize | 窗口大小发生改变时（js实现响应式页面） |
| 定时器 | |
|---|---|
| setTimeout() 和 clearTimeOut() | 倒计时结束后，调用一次回调函数。 |
| setInterval() 和 clearInterval() | 每隔一段时间，调用一次回调函数。 |
location对象
location是最有用的BOM对象之一，提供了当前窗口中加载文档的信息，以及通常得导航功能
| 属性 | |
|---|---|
| location.href | 返回完整的URL |
| location.host | 返回域名 |
| location.search | 返回一个URL的查询部分 |
| 方法 | |
| location.assign() | 载入一个新的文档 |
| location.reload() | 重新载入当前文档 |
| location.replace() | 用新的文档替换当前文档 |
history对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。 History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问
| 属性 | |
|---|---|
| history.length | 返回历史列表中的网址数 |
| 方法 | |
| history.forward() | 加载 history 列表中的前一个 URL |
| history.back() | 加载 history 列表中的下一个 URL |
| history.go() | 加载 history 列表中的某个具体页面 |
什么是DOM？
文档对象模型（Document Object Model, 简称DOM），是W3C组织规定的处理HTML的标准编程接口。 通过DOM API，用于操作html页面。
DOM 构架
常用DOM方法
主要包括：增、删、改、查、事件操作
增、删、改、查（思维导图）
事件操作
-
事件三要素
- 绑定元素
- 触发事件
- 响应函数
document.addEventListener(event, function[, useCapture])
| 参数 | 描述 |
|---|---|
| event（必选） | 字符串，描述事件名称 |
| function（必选） | 函数，触发事件后执行的函数 |
| useCapture（可选） | 布尔值，true捕获阶段执行，false冒泡阶段执行 |
- 常用事件总结
| 常见事件（鼠标） | 触发条件 |
|---|---|
| click | 单击 |
| dblclick | 双击 |
| mouseenter | 鼠标悬停在元素上,替代mouseover |
| mouseleave | 鼠标离开元素,替代mouseout |
| focus | 鼠标按键按下 |
| blur | 鼠标按键抬起 |
| 常见事件（键盘） | 触发条件 |
|---|---|
| keydown | 键盘按键按下 |
| keypress | 键盘按键按下，仅用于字符按键，不识别功能键 |
| keyup | 键盘按键抬起 |
执行顺序：keydown → keypress → keyup
- DOM事件流
DOM事件流：DOM事件发生的顺序，可以分为事件捕获阶段和事件冒泡阶段。
TIPS
- onclick和attchEvent只有冒泡
- document.addEventListener(event, function[, useCapture]) true为事件捕获，false/省略为事件冒泡
- 部分事件类型无冒泡（blur...）
事件委托（代理、委派）：不给每个子元素单独设置事件监听，而是设置在其父元素上，利用冒泡原理间接设置到每个子节点，提升程序性能。
例子： 将多个子元素（li）的事件监听委托给父元素（ul），父元素利用event.target获取子元素，并通过子元素调用（call）
- 事件对象
在触发 DOM 上事件时，会产生一个事件对象 event，这个对象中包含着所有与该事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。
ele.onclick = funciton(event) {}
