1.BOM
window下包含：
history 管前进后退
location 管地址栏
document 其实就是DOM中的document对象
navigator 管浏览器配置信息
screen 管显示设备的信息
event 管事件处理
history：
什么是：保存当前窗口打开后，成功访问过的url的历史记录数组。
何时：只要用程序自动前进后退时，都用history
如何：history.go(n)
比如：前进一步：history.go(1)
后退一步：history.go(-1)
有时后退一次不管用，可histroy.go(-2)后退两步。
刷新:history.go(0)
location:
什么是：专门保存地址栏中的地址信息，以及提供执行跳转操作的方法的对象。
何时：1.希望获得地址栏中的url信息时。
2.希望执行一些特殊的跳转操作时
如何：
1.获得地址栏里的url信息
location.href完整url
location.protocol协议
.host 主机名+端口号
.hostname 主机名
.port 端口号
.pathname 相对路径
.search获得?以及之后的查询字符串
.hash 获得#锚点地址
2.执行跳转操作：
1.在当前窗口打开,可后退：
location.href="新url"
或location.assign("新url")
或location="新url"
都等效于:window.open("url","_self")
2.在当前窗口打开，禁止后退：
location.replace("新url")
3.刷新页面:2种:
1.普通刷新:优先从浏览器缓存中获取资源，缓存中过期或没有时,才去服务器
重新获取。
history.go(0)
location.reload()
F5
问题:可能即使刷新后，也无法获得服务器上的新内容。
2.强制刷新：始终跳过浏览器缓存，总是从服务器端获取新内容：
location.reload(true)
问题：每次都需要从服务器重新获取，导致加载慢，且增大
服务器的压力！
navigator:
什么是：保存浏览器配置信息的对象
何时：获取浏览器配置信息时
包括：
1.判断是否安装某个插件
什么是插件：为浏览器添加新功能的小软件。
如何判断是否安装了某个插件：
浏览器中所有已安装的插件信息都保存在navigator的plugins集合中。
插件名就是插件信息在集合中的下标名。
可以强行访问插件名下标，如果返回的值undefined，就说明没安装。
如果返回的不是undefined,说明安装了。
2.判断浏览器的名称和版本号
浏览器的名称和版本号都包含在一个navigator的userAgent属性中。
但是，userAgent是一个巨大的字符串，我们需要通过字符串查找的方式，判断浏览器的名称和版本号、
2.事件：
什么是：浏览器自动触发的，或用户手动触发的页面内容状态的改变。
事件属性：每个元素上都有一批以on开头的事件属性，用于提前保存事件
处理函数。当事件发生时,浏览器会自动找到该事件属性上绑定的处理函数，自动执行。
事件处理函数：当事件发生时，想要自动执行的函数
何时：只要希望事件发生时，能自动执行一项任务。
如何：
1.绑定事件处理函数：3种：
1.HTML中:<ANY on 事件名="js语句">
问题:不便于维护和重用
2.js中用赋值方式绑定：
DOM元素.on事件名=function(){ ..... }
问题：一个事件属性,只能绑定一个处理函数。如多次绑定处理函数，
只有最后一个事件处理函数可以生效。
3.js中用添加事件监听对象的方式：
添加 事件 监听
DOM元素.addEventListener("事件名",事件处理函数)
原理:
1.其实在浏览器中有一个事件监听对象队列。
2.每为一个DOM元素，绑定一个事件处理函数，就会在监听对象对列中添加
一个新的监听对象。
DOM元素.on事件名=function也是添加事件监听对象的意思，但是，第二次
执行=function时,不是新增对象,而是找到原监听对象替换。
DOM元素.addEventListener是不管当前元素有没有这个事件的处理函数
都增加一个新的监听对象。
3.当事件发生时，浏览器会遍历整个监听对象的队列，找到符合条件
的监听对象，执行其中的处理函数。
2.当事件发生时，浏览器自动调用对应元素上的对应事件处理函数执行。
3.移除事件监听:
DOM元素.removeEventListener(
"事件名",原处理函数对象
)
强调：如果一个处理函数可能被移除，那么在绑定时就不要用匿名函数。而是
用有名称的函数绑定！
DOM事件模型：
什么是：从事件发生开始，到所有处理函数触发完，所经历的整个过程：
包括：3个阶段：
1.捕获：由外向内，依次记录各级父元素上绑定的处理函数---只记录，不执行。
2.目标触发：先触发目标元素上的处理函数
目标元素：最初想点击的那个元素
3.冒泡：由内向外，依次出触发捕获阶段记录的各级父元素上的处理函数。
事件对象：
什么是：当事件发生时，浏览器自动创建的，保存事件信息的对象
何时：2种：
1.希望获得事件相关的信息时
2.希望改变事件模型的默认行为
如何：
1.不用自己创建！只要获取即可！
事件对象，总是作为处理函数的第一个参数自动传入。-------信任
当事件发生时：
//window创建event对象
//DOM元素.on事件名(event)
DOM元素.on事件名=function (e){
//e就获得了window自动创建的event
}
2.取消冒泡
e.stopPropagation();
停止 蔓延
3.事件委托/利用冒泡：
优化：尽量减少事件监听的个数。
因为：浏览器触发事件时采用的是遍历队列的方式。队列
中监听对象多，遍历查找的速度就可能慢，事件相应的速度就可能延迟。
队列中监听对象少，遍历查找的速度就快，事件响应的速度就快！
如何：今后只要多个平级子元素都要绑定相同的事件时，只要将事件
在父元素绑定一次，所有子元素都可通过冒泡原理共享父元素的事件使用！
难题：
1.每个按钮做的事儿不一样，如何获得实际点击的目标元素？
错误：this不能用！
正确：用e.target代替this
e.target是始终保存目标元素的特殊属性。不随冒泡而改变。
优点：
1.无论多少个子元素，都可共享一个事件处理函数
2.即使动态添加的元素，也可自动获得处理函数
4.阻止默认行为：
什么是：有些元素上自带了一些默认行为：
比如：<a href="#">默认回到顶部</a>
如何：e.preventDefault();
5.鼠标位置:3组：
1.相对于屏幕左上角的位置：
e.screenX,e.screenY
屏幕 屏幕
2.相对于浏览器中文档显示区域左上角的位置：
e.clientX,e.clientY
客户端 客户端
3.相对于当前事件绑定的元素左上角的偏移量：
e.offsetX,e.offsetY
总结：DOM优化：
1.查找：
如果只要一个条件就可找到元素时，首选getElementsByXX
如果查找条件复杂，就首选按选择器查找
2.修改样式能一句话修改的，就不两句话修改：
为了减少重排重绘
元素.style.cssText="200px;height:100px;"
代替： 元素.style.width="200px"
元素.style.height="100px"
3.添加元素:为了减少重排重绘，应该尽量减少操作DOM数的次数。
如果同时添加父元素和子元素，应该先将子元素添加到父元素，最后一次性添加
到DOM树。
如果父元素已经在页面上，需要同时添加多个平级子元素时，应该创建文档片段，
将子元素先加入文档片段中，最后再一次性将文档片段添加到DOM树。
4.尽量减少事件监听的个数:事件委托
1.将事件绑定在父元素上一份，所有子元素冒泡共用
2.用e.target代替this
3.判断e.target的特征，只有符合条件的目标元素才能执行后续正常的操作。