theme: vuepress
一、前言
在这个技术飞速发展的时代，我们作为一前端开发的工作者，浏览器自然成了我们最亲密的朋友，但是我们真的了解我们这位最熟悉得朋友么？我承认，浏览器对我来说是最熟悉的陌生人，我和他每天都会见面交流，但是我对其并没有深入了解，所以，今天花点时间，来稍微小结性的了解下我们的这位朋友吧！
二、浏览器对象模型
BOM ：Browser Object Model（浏览器对象模型）,浏览器模型提供了独立于内容的、可以与浏览器窗口进行滑动的对象结构，就是浏览器提供的 API。
- window 对象——BOM 的核心，是 js 访问浏览器的接口，也是 ES 规定的 Global 对象
- location 对象：提供当前窗口中的加载的文档有关的信息和一些导航功能。既是 window 对象属 性，也是document 的对象属性
- navigation 对象：获取浏览器的系统信息
- screen 对象：用来表示浏览器窗口外部的显示器的信息等
- history 对象：保存用户上网的历史信息
- 存储对象：Web 存储 API 提供了 sessionStorage （会话存储） 和 localStorage（本地存储）两个存储对象来对网页的数据进行添加、删除、修改、查询操作。localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除。sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。
1、Window对象
windows 对象是整个浏览器对象模型的核心，其扮演着既是接口又是全局对象的角色。
| 方法名 | 描述 |
|---|---|
| alert() | 系统警告对话框，接受字符串参数并显示 |
| confirm() | 系统确认对话框，可以提供确认或取消两种事件，返回布尔值类型 |
| prompt() | 提示对话框，可以对用户展示确认，取消事件外，还可以提供文本域.prompt(msg, default)长锡矿外部是msg，内部是default |
| open() | 可以导航到指定的地址，也可以打开一个新的浏览器窗口。window.open(url, 窗口目标, 一个特定的字符串, 一个新页面是否取代浏览器历史记录中当前加载页面的布尔值) |
| onerror() | 事件处理程序，当未捕获的异常换博导调用栈上时就会调用它，并且把错误的消息输出到控制台上。window.onerror(错误信息, 存放错误的JS代码所在的文件url, 文件中发生错误的行数) |
| setTimeout() | 超时调用，在指定的时间过后执行代码，window.setTimeout(执行的方法, 时间毫秒) |
| setInterval() | 间歇调用，每隔指定时间就执行一次，window.setTimeval(执行的方法, 时间毫秒) |
1.确认窗口位置
| 属性名 | 描述 |
|---|---|
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| screeY | 返回相对于屏幕窗口的y坐标 |
| moveBy(x,y) | 可相对窗口的当前坐标把它移动指定的像素。 |
| moveTo(x,y) | 把窗口的左上角移动到一个指定的坐标。 |
2.确认窗口大小
| 属性名 | 描述 |
|---|---|
| innerWidth | 返回窗口的文档显示区的宽度。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| resizeTo(x,y) | 把窗口的大小调整到指定的宽度和高度。 |
2、Location对象
| 属性名 | 描述 |
|---|---|
| hash | url的hash值 |
| host | 服务器名称+端口 |
| hostname | 只含服务名字 |
| herf | 当前加载页面完整的url |
| parthname | 返回的URL路径 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 参数 |
3、Navigator 对象
| 属性名 | 描述 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
| geolocation | 返回浏览器的地理位置信息 |
| language | 返回浏览器使用的语言 |
| onLine | 返回浏览器是否在线，在线返回 ture，否则返回 false |
| product | 返回浏览器使用的引擎（产品） |
| javaEnabled() | 指定是否在浏览器中启用Java |
| taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
4、History对象
| 属性名 | 描述 |
|---|---|
| length | 返回历史列表中的网址数 |
| go() | 加载 history 列表中的某个具体页面 |
| back() | 加载 history 列表中的前一个 URL |
| forword() | 加载 history 列表中的下一个 URL |
5、e 事件监听的e
| 属性名 | 描述 |
|---|---|
| e.clientX | 鼠标的坐标到页面左侧的距离 |
| e.clientY | 鼠标的坐标到页面顶部的距离 |
| e.offsetX | 鼠标坐标到元素的左侧的距离 |
| e.offsetY | 鼠标坐标到元素的顶部的距离 |
| e.clientWidth | 可视区域的宽度 |
| e.clientHeight | 可视区域的高度 |
| e.target.offsetLeft | 该元素外边框距离包含元素内边框左侧的距离 |
| e.target.offsetTop | 该元素外边框距离包含元素内边框顶部的距离 |
6、存储对象
| 属性名 | 描述 |
|---|---|
| length | 返回存储对象中包含多少条数据 |
| key(n) | 返回历史列表中的网址数 |
| getItem(keyname) | 返回指定键的值 |
| setItem(keyname, value) | 添加键和值，如果对应的值存在，则更新该键对应的值 |
| removeItem(keyname) | 移除键 |
| clear() | 清除存储对象中所有的键 |
| window.localStorage | 在浏览器中存储 key/value 对。没有过期时间。 |
| window.sessionStorage | 在浏览器中存储 key/value 对。 在关闭窗口或标签页之后将会删除这些数据 |
三、浏览器事件模型
1、关于事件
事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。
- 事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。
- 事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。
2、事件订阅
浏览器的交互是通过浏览器的内置事件响应实现的，常见的浏览器事件有文档载入（load），元素点击（click）等，订阅浏览器事件可以通过如下方式实现。
- HTML属性的事件句柄，如：onclick
- DOM属性的事件句柄，在js中为dom添加onclick方法
- 事件句柄注册：IE8+（window的两个方法addEventListener和removeEventListener）和IE8及以下（attachEvent与detachEvent）
3、事件传播
(1)、捕获阶段
从上到下，从外到内捕获事件。
addEventListener(type, listen, useCapture)的最后一个参数指示了在哪个阶段调用事件回调。如果是true，那么在type事件的捕获阶段将会调用listen方法，如果是false，那么就在冒泡阶段触发。
(2)、目标阶段
(3)、冒泡阶段
和捕获事件相反的顺序来冒泡到window
4、阻止事件传播
通过执行e.propagation()来阻止事件的传播，包括捕获阶段和冒泡阶段的事件传播。
5、阻止事件默认行为
通过执行e.preventDefault()来阻止事件的默认。
