BOM
window BOM的根元素
注意：
使用window的方法时可以不用加window
如：window.open();
open()
弹出框open
如：open("http://163.com","我的网页","width=200,height=200");
弹出宽高为200的窗口，内容为网易网页
不用了浏览器已经做了对弹出框的限制
close()：关闭浏览器网页
document.onclick=function(){
close();//一般不用
}
点击网页时关闭网页，现在一般不用了
innerWidth和innerHeight
这个是可视窗口的宽高，和document.documentElement.cilentWidth ， document.documentElement.clientHeight一样
outerWidth和outerHeight
浏览器的窗口宽高，也就是整个浏览器打开的窗口
screenLeft、 screenTop 和screenX 、 screenY
上面的两组是相同的都是指当前窗口左上角相对于屏幕左上角的坐标
只能获取，不能设置
console.log(screenLeft,screenTop);
console.log(screenX,screenY);
location 表示本地
reload( );重载
重载以前用，现在不用
location.reload();
重点记忆AAA级location.href、location.assign、location.replace
location.href跳转网页，同时也可以获取网页地址，有历史记录
location.assign跳转网页，有历史记录，但不能获取网页地址
location.replace替换当前网页，因为是替换所以这个没有历史记录，也无法获取网页地址
document.onclick=function(){
console.log(location.href);
location.href="http://www.163.com";
也是跳转页面，href除了跳转页面，还可以获取当前页面的网址
assign只能跳转页面
location.assign("http://www.163.com");
替换当前页面，也是跳转页面，上面两个有历史记录，下面的这个没有历史记录
location.replace("http://www.163.com");
}
location.hash获取地址栏中#后面的内容，也就是锚点的标记名
location.search获取地址栏中?后面的内容，也就是访问地址的参数
现在了解，后面讲
console.log(location.pathname);//地址栏中文件路径和名称
console.log(location.port);//地址栏中的端口号
console.log(location.protocol);//地址栏中的协议
console.log(location.hostname);//地址栏中的域名
history 历史记录重点记忆AAA级
history.back( )回退网页，退回上一个页面
history.forward( )前进到下一个页面，在有下一个页面记录的情况下
history.go(1)跳转前进或者后退到第几个页面。正值为前进，负值为后退，0是刷新页面
screen 屏幕
screen.width和screen.height全屏幕宽高
console.log(screen.width,screen.height); //全屏幕宽高
screen.availWidth和screen.availHeight不带任务栏的屏幕宽高
console.log(screen.availWidth,screen.availHeight);//不带任务栏的屏幕宽高
navigator 浏览器信息，后期做兼容需要用到
navigator.userAgent用户浏览器信息AAA级
// 获取用户浏览器信息
console.log(navigator.userAgent);
重点：事件
事件初步解释
document.addEventListener("click",clickHandler);
IE8以上支持
DOM.addEventListener(事件类型,事件回调函数);
给DOM元素添加一个事件侦听（监听）,只能收到对应事件类型的消息，
当收到click这个消息，执行事件回调函数
click这个消息是系统消息
function clickHandler(e){
console.log(e);
}
事件回调函数
e 有且仅有一个参数e
e 是一个事件对象,侦听事件收到消息时获得的事件对象
事件侦听和抛发
注意：事件都是必须先侦听,再抛发
document.addEventListener("天王盖地虎",anhaoHandler);
// 这里的new Event()指创建一个事件对象
var evt=new Event("天王盖地虎");
evt.a=10;
// 在document里发出公告,将刚才新建的事件发送给document
// 向document抛发新建的event事件
document.dispatchEvent(evt);
function anhaoHandler(e){
// 注意：这里的e就是我们创建的时间对象，它们是相等的
console.log(e===evt);
// 我们在上面给时间对象添加元素，在函数里e会获取的，因为他俩是同一个对象
console.log(e.a);
}
事件分两种类型：系统事件和自定义事件，老师未详细讲解
烂代码案例，引以为戒
// 高耦合
// 烂代码
var obj1={
a:function(){
obj2.d(5);
},
b:function(sum){
console.log(sum)
}
}
var obj2={
c:function(){
obj1.b(10);
},
d:function(s){
console.log(s);
}
}
// 对象间的数据传递
// obj1.a();
// obj2.c();
使用事件来解决烂代码问题（要像这个靠拢）
// 事件传播
// 解耦
var obj1={
a:function(){
//注意在这里 this 是对象的方法中this就是该对象自身,这里this就是obj1
// this.b就是obj1下的b
// 受到obj2.c发出的事件对象时开始执行obj1.b
document.addEventListener("aaa",this.b);
},
b:function(e){
// 传到这里
console.log(e,e.s);
}
}
var obj2={
v:10,
c:function(){
var s=5;
// 创建一个事件对象
var evt=new Event("aaa");
// 将s=5赋值给e里面的新s
evt.s=s;
// 在document里发出公告,将刚才新建的事件发送给document
// 向document抛发新建的evt事件，这时obj1.a里会侦听到
document.dispatchEvent(evt);
},
d:function(){
}
}
打算执行obj2.c 将局部变量5传递给obj1的方法b中
事件原理（重点）
div0.addEventListener("click",clickHandler0,true);
div0.addEventListener(事件类型,事件回调函数,是否捕获时执行);
事件类型必须是字符串，可以设置为任意字符串，但是部分字符串是系统事件类型
事件回调函数指向一个函数，当收到事件时执行该函数，如果没有收到不执行函数，写侦听事件时不执行函数
是否捕获时执行默认值是false，在冒泡时执行，捕获时不执行，
如果设置为true，在捕获时执行
详细请看4月2号下午第二节课视频和4月2号3、事件原理代码案例
原理
事件分三步进行
1：捕获 ------> 2：目标 ------> 3：冒泡
1：捕获 从在外层向里依次捕获，这时获取的元素排序就是从外往里依次排序
2：目标 就是捕获到达了我们点击的目标（自己理解的）
3：冒泡 是在捕获到达目标后，开始原方向返回时回再次经历每个元素，这时获取的元素排序就是从里往外依次排序，与捕获相反
div0.addEventListener(事件类型,事件回调函数,是否捕获时执行);中的第四个属性值是设置是否捕获的，
e.stopPropagation();
如果在冒泡是我们得到我们想要的值，不想在继续冒泡，可以在改层设置e.stopPropagation();
这个存在兼容问题：IE8及以下时用 e.cancelBubble=true;
