BOM概述

BOM概述：
BOM和DOM都被称为宿主对象，
DOM是WEB页面的存放环境；
BOM是浏览器的运行环境；
面试题：
内置对象，自定义对象和宿主对象有什么区别？
内置对象：是厂家直接预定义好的对象方法；
自定义对象：开发人员根据需要自我定义的相关方法；
宿主对象：前端文档运行的环境；
BOM对象的代码标识：window.
打开网页：
window.open("打开的链接","打开的方式","打开的尺度")
open() 打开一个页面的方法；
open("打开页面的URL地址","打开方式_blank","打开多大的窗口")
关闭网页：
close();关闭网页；
只写close()关闭的是当前的网页；
如果close(name);关闭的是叫这个名字的网页；

线程：在同一个进程中，同时有多少的事件在处理，一个事件处理就是一个线程。
进程：就是一个事情的总处理进度，叫做进程；
在前端里，js属于单线程程序，他与计算机中的时间线程分别属于不同的线程，彼此不影响，
我们学习的定时器就是一种典型借用时间线程的方法，

定时器分两种：
1.周期性定时器，setInterval(fun,1000); 是没过一秒都是能看的到的叫做周期性定时器，
clearInterval("定时器的名字"):清除，停止的意思；
2.一次性定时器，setTimeout(fun,1000); 是给确定一个时间，中间看不到过程叫做一次性定时器，
clearTimeout("定时器的名字") 清除定时器；
window下的对象：
history对象：浏览器的历史记录；
属性：length,统计的是浏览器内浏览的网页数量，
语法为： console.log(history.length);
history.forward(); 前进
history.back(); 后退
navigator对象：
主要是关于浏览器的相关信息的对象；
navigator.appCodeName:返回浏览器的代码名，
navigator.appMinorVersion:返回浏览器的次级版本；
navigator.appName:返回浏览器的名称；
navigator.appVersion：返回浏览器的平台和版本信息，
navigator.cookieEnabled:返回浏览器中是否启动cookie的布尔值 ，主要是在c盘存储缓存。
location对象：获取当前页面的url地址，
location.href //本地地址，
location.href="设置的新的地址"；
screen:浏览器屏幕尺寸；
screen.height; 获取的是屏幕的高度；
screen.width; 获取的是屏幕的宽度；
Event对象：事件对象；
什么是事件？
用户在浏览器中进行的任何一次操作引发的交互，这样的操作都叫做事件；
事件的分类：
1.键盘事件
2.鼠标事件
3.状态类事件
事件的添加绑定：
1.在HTML内直接添加事件属性；
例如：<span onclink="aa"></span> ：不符合结构行为分离，所以在面向对象开发过程中，建议少用，
2.在js内通过属性绑定的方式添加事件；
例如：E.onclick=方法名；
e.onclick=a；
function a(){};
相同的事件下，所添加的方法只能一次添加一个；
3.为了解决以上两种事件绑定的弱点，我们使用专有的事件绑定方法；
最大的缺陷就是浏览器的兼容问题
在IE浏览器下：
E.attachEvent("on+事件名"，事件执行函数function(){})
标准浏览器下： //DOM标准
E.addEventListener("事件名"，事件执行函数function(){})

设置兼容：
if(e.attachEvent){
e.attachEvent //IE需要写on+click
}else{
e.addEventListener //非IE
}
事件周期：
第一阶段：事件的捕获，事件对象沿DOM树向下传播；
第二阶段：目标触发，运行事件监听函数；
第三阶段：事件冒泡，事件沿DOM树向上传播；
IE 事件触发；事件冒泡
非IE 事件捕获 事件触发 事件冒泡
事件冒泡：
冒泡：当我们点击子级时，如果父级也有相同的事件，那么他们会同时触发；
主要原因是：因为对于父级来说，子级在父级至上，子级触发事件父级也已经被触发，
如果我们需要阻止事件的冒泡，
那么我们就需要首先确认在什么事件状态去阻止；
所以我们首先确认事件状态，这个事件状态被称为：事件对象，其实就是指定某个事件；
要确定事件对象就必须先获取事件对象：
事件对象是不能被人工定义出来，而是当我们触发一个事件的时候，会自动产生一个事件对象；
因为我们触发事件，引用的是一个函数对象，那么事件对象就会自动出现在函数对象参数刘表的第一个位置上，
获取事件对象存在兼容性问题：
非IE浏览器的事件对象：
在事件触发的函数对象内，使用arguments[0];
IE的浏览器事件对象获取：
window.event
兼容性写法：
arguments[0]||window.event;
事件源 对象：
var src=evt.srcElement(IE)||evt.target(标准) evt：代表的是event


阻止默认行为：
学习了事件对象之后，我们会发现在实际的开发工作中，我们经常遇到一些元素具有默认的行为。
为了不让默认的行为破坏掉我们的js设置，我们就需要阻止这些默认的行为，
在IE下的阻止默认行为是：evt.returnValue=false;
在标准浏览器下：evt.preventDefault;
阻止事件冒泡：
在标准的浏览器下：
evt.stopPropagation()
在IE下：
evt.cancelBubble=true;
事件委托/事件代理
如果父级下有多个子级都需要有相同的事件，那么我们就不需要给每个子级添加事件；
只需要在父级上添加一个事件，即可实现对子级的统一控制；
var div=document.querySelector("div");//获取父级的div;
div.onclick=function(){
var evt=arguments[0]||window.event; //事件对象，
console.log(evt);
var src=evt.srcElement||evt.target;//事件源对象获取
alert(src.textContent);
console.log(src);
}
坐标：
1.clientX、clientY、这个是用来获取鼠标在当前显示器窗口的坐标，x,y分别以显示器窗口的左边和上边为参考点，
2.pageX,pageY,用来获取HTML网页上鼠标的坐标，X,Y分别以正规HTML页面的左边和上边为参考点。
3.layerX,layerY，如果触发事件的元素不参与定位，那么此时鼠标的左边的位置以HTML的上边和左边为准，
如果触发事件的元素参与了定位：那么鼠标的坐标点的参考位置会发生改变，
4.screenX,screenY：是以屏幕左上角为准，
5.offsetX,offsetY:IE浏览器使用的相对于触发事件元素的左边定位方法；