1.Browser Object Model(浏览器对象模型)
提供了专门用于操作浏览器的API - 没有标准，使用的较少，但大部分浏览器厂商已经统一实现了（老IE）
2、BOM对象：
- window（定时器）---重点
- history、
- location、---重点
- navigator
- event---重点
- screen...
3、window对象：扮演了2个角色：
1、浏览器中，window代替了ES的Global充当全局作用域;包含了所有的全局对象、变量、函数
2、指代当前浏览器的窗口
3.1、*网页打开新链接的方式
1、替换当前页面，可以后退：
HTML：<a href="url">文字</a>
JS：open("url","_self");
2、替换当前页面，禁止后退：使用场景：电商网页：结账完毕后，不允许用户后退
history对象：保存了当前窗口的历史记录，功能：前进后退
location：保存了当前窗口正在打开的url
location.replace("新url");//替换当前网址、不会产生历史记录
3、在新窗口打开，可以打开多个：
HTML：<a href="url" target="_blank">文字</a>
JS：open("url","_blank");
4、在新窗口打开，只能打开一个：使用场景：电商网页：跳转到 支付结账页面，只允许用户打开一个
HTML：<a href="url" target="自定义">文字</a>
JS：open("url","自定义");
自定义：窗口的底层都有一个名字，如果出现重复的名字则新窗口会替换掉原来的旧窗口
扩展：a标签可以做的事？
1、跳转
2、锚点
3、下载：<a href="xx.rar/zip/exe">文字</a>
4、打开图片、txt：<a href="xx.图片后缀/txt">文字</a>
5、直接书写js：<a href="javascript:js代码;">文字</a>
注: 页面跳转时注意考虑用户体验感
3.2、window对象：属性和方法：
属性：
获取浏览器窗口的大小：
-
文档显示区域的大小：body部分
innerWidth/innerHeight -
完整的浏览器大小：
outerWidth/outerHeight -
屏幕的大小：没用 - 桌面应用才用的
screen.width/height
方法：
1、打开新窗口：var newW=open("url","自定义name","width=,height=,left=,top=");
特殊：如果没传入第三个参数，新窗口会和浏览器并为一体
如果传入第三个参数，新窗口会脱离浏览器
建议宽高不小于200
有可能会被浏览器拦截
2、关闭窗口：窗口.close();
3、修改窗口的大小：新窗口.resizeTo(newW,newH);
4、修改窗口的位置：新窗口.moveTo(x,y);
扩展： 获取鼠标的坐标：
1、事件中传入一个形参e->获得到事件对象event（其中一个作用获取鼠标的坐标）
2、获取：
e.screenX/Y;//相对于屏幕
e.clientX/Y;//相对于浏览器客户端
*e.pageX/Y;//相对于网页的
鼠标跟随效果：关键点：
1、绑定事件：window.onmousemove
2、图片位置一定和鼠标位置一起
3、图片的加载速度比js的执行速度要慢，img.onload=function(){
//最后才会执行
}
5、*****定时器：2种
1、周期性定时器： 先等待，在执行一次，在等待，在执行一次...
开启：timer=setInterval(callback,间隔毫秒数);
停止：clearInterval(timer);
2、一次性定时器： 先等待，在执行一次，结束
开启：timer=setTimeout(callback,间隔毫秒数);
停止：clearTimeout(timer);
小结 : 两种定时器底层相同，可以互换，你爱用哪个就用哪个
6、history：
保存当前窗口的历史记录（历史url）
作用：
前进：history.go(1);
后退：history.go(-1);
*刷新：history.go(0);
7、***location：
保存当前窗口的正在打开的url
*7.1、常识：一个url由5部分组成
http://127.0.0.1:8020/bom02/new/01-3.html
https://www.baidu.com/s?wd=178&rsv_spt=1&rsv_iqid=0xd702eab1000426fa&issp=1&f=8&rsv_bp=1&rsv_idx=2&ie=utf-8&rqlang=cn&tn=baiduhome_pg&rsv_enter=1&rsv_dl=tb&oq=178%2526lt%253B&rsv_btype=t&inputT=204&rsv_t=8b56iJOG%2B6b45FILzCXex%2FpEHFfVJ6HMrt%2FXQdYMKdOy%2B8bu9OZqejCb14LrHOIywVaU&rsv_sug3=7&rsv_sug1=4&rsv_sug7=100&rsv_pq=a3ee42be00024fae&rsv_sug2=0&rsv_sug4=981
1.协议：http/https（请求响应模式）/ftp（传输文件）/ws（广播收听模式：直播） - 网页的功能不同
2.主机号/域名：www.baidu.com/127.0.0.1 - 主机号不方便记忆所以多半都会购买域名，而且127.0.0.1只能访问自己
3.端口号：:8020 - 默认端口：http - 80 https - 443，默认端口可以省略不写
4.文件的相对路径：new/01-3.html /s -百度加密了
5.查询字符串：?wd=178&rsv_spt=1... - 表单提交到服务器的东西 - 请求消息
注 : 一般来说一个网址一定由5部分 ：协议://域名:端口号/文件路径?查询字符串
目的：1、常识
2、学习服务器端的时候有好处
7.2、属性：
不需要记忆，直接用console.log(location)可以查看到有哪些属性
作用：获取：协议、域名、端口号、文件路径、查询字符串
*7.3、API：跳转
location="新url"
location.href="新url"
location.assign("新url");
以上三个操作功能相同都是跳转页面，意味着以后不一定非要用a标签跳转
替换后禁止后退：location.replace("新url")
刷新：location.reload();
8、navigator：
保存了当前浏览器的信息（浏览器的名称/版本号）
属性：
navigator.userAgent;
根据字符串截取出浏览器名称&版本号：本来的目的是为了做兼容，但是没用因为所有的API前辈们都已经设置好了兼容.
9、******event：事件对象
事件 ： 多半用户触发 或 浏览器自动触发的操作
9.1、*绑定事件：3种
1、在HTML元素上绑定
<elem on事件名="js语句"></elem>
缺点：
1、没有实现JS与HTML的分离 - 要HTML（内容）/CSS（样式）/JS（行为）分离
2、无法动态绑定事件 - 一次只能绑定一个元素
3、无法同时绑定多个函数对象
2、*使用JS的事件属性绑定：
elem.on事件名=function(){
js语句
}
优：1、实现JS与HTML的分离
2、动态绑定事件
缺：1、无法同时绑定多个函数对象 - 算不上是缺点，为什么不写一起
3、使用JS的API绑定事件：
主流：elem.addEventListener("事件名",callback)
老IE：elem.attachEvent("on事件名",callback);
兼容：if(elem.addEventListener){
elem.addEventListener("事件名",callback)
}else{
elem.attachEvent("on事件名",callback);
}
优：1、实现JS与HTML的分离
2、动态绑定事件
3、同时绑定多个函数对象
缺：需要处理兼容性问题
9.2、事件周期：
-
主流：3个
1、捕获阶段：由外向内，记录着要执行的事件 2、目标触发：当前点击的元素优先出发 3、冒泡触发：由内向外的冒泡触发事件 -
老IE：2个
1、目标触发：当前点击的元素优先出发 2、冒泡触发：由内向外的冒泡触发事件
9.3、*****获取到事件对象event：
主流：事件函数中传入一个形参e，就可以自动接住事件对象event
老IE：window.event;
兼容：event;不光老IE可用，主流浏览器也可以使用 - 小三上位
获取到了事件对象event就可以做很多很多的操作了：
1、*获取鼠标的位置
2、*阻止冒泡：
重要在于面试中/鄙视中，但是开发中绝对不会阻止冒泡，更需要利用冒泡
主流：e.stopPropagation();
老IE：e.cancelBubble=true;
兼容：if(e.stopPropagation){
e.stopPropagation()
}else{
e.cancelBubble=true;
}
3、***事件委托（利用冒泡）：
为什么 ： 优化，每绑定一个事件，相当于就创建了一个事件监听对象，创建的对象越多，网页的性能越底下
建议：建议把事件都绑定在自己的父元素身上一次即可
获取目标元素：触发的元素 - 永远不变就是你触发到的元素
当前元素：this -> 指向多的一批
主流：e.target;
老IE：e.srcElement;
兼容：e.srcElement;不光老IE可用，主流浏览器也可以使用 - 小三上位
以后事件之中再也不要使用this了
做一个：计算器、选项卡、轮播...
4、*阻止浏览器的默认行为：
哪些：比如：F5带来的刷新，F12带来的控制台，右键带来的菜单框，F11全屏，a自带跳转，submit自带提交...
主流：e.preventDefault();
老IE：e.returnValue=false;
兼容：if(e.preventDefault){
e.preventDefault()
}else{
e.returnValue=false;
}
新事件：
1、鼠标右击：window.oncontextmenu
2、键盘事件：window.onkeydown
5、*获取键盘的键码
e.keyCode;//不需要记忆，直接输出查看 或 百度 keyCode表
扩展：*****客户端存储技术
以前使用cookie（缺点：大小有限2kb，30天必死），HTML5提出了一个新概念webStorage：2种（优：大小有限8mb，生命周期无限，缺点：老IE不支持）
1、localStorage：本地级 - 浏览器关闭甚至电脑关闭，第二天打开依然存在
2、sessionStorage：会话级 - 浏览器一旦关闭自动死亡
作用：
1、数据可以跨页面传输
2、皮肤、主题
3、浏览器的历史记录
语法 ： 非常简单，类似于对象：
添加：xxxxStorage.属性名="值";
获取：xxxxStorage.属性名;
删除：xxxxStorage.removeItem("属性名");//只会删除这一个
清空：xxxxStorage.clear();//删除所有
总结：bom重点：
1、定时器
2、location跳转
3、event对象： 1、写出你知道的绑定事件的方式：3种 2、事件：主流3种 老IE2种 3、如何阻止冒泡 4、事件委托 5、阻止浏览器的默认行为 6、获取键盘键码 7、获取鼠标的坐标
