咱们聊聊【BOM】吧

平时做项目的时候，遇到了一系列的问题，例如：当浏览器窗口大小改变时，如何判断客户端是手机还是电脑，如何在鼠标滚动到某个位置的时候有动画效果。。。。。。而JavaScript中的BOM，就是提供了一系列的与浏览器窗口进行交互的API：

BOM

✦  什么是BOM呢？

它是用来访问和操作浏览器窗口的，通过使用BOM，可以移动窗口，改变状态栏的文本等，它虽然没有相关的标准，但被广泛支持。。。。。

✦  BOM包含了那些对象呢？

✧  window对象

❀  它其实就是浏览器中打开的窗口；

☛  如果HTML文档中包含了框架（frame或者iframe标签），浏览器呢会为HTML文档创建一个window对象，另外还会为每个框架创建一个额外的window对象；

☛  window对象其实是BOM对象的根对象，其他对象其实都是window对象的属性，window对象的属性和方法是可以省略‘window’的，比如：window.document可以简写为document，window.alert()可以简写为alert()；

window对象常用的属性

属性名	含义
defaultStatus	设置或返回窗口状态栏中的默认文本
innerHeight	返回窗口的文档显示区的高度
innerWidth	返回窗口的文档显示区的宽度
length	设置或返回窗口中的框架数量
name	设置或返回窗口的名称
opener	返回对创建此窗口的窗口的引用
outerHeight	返回窗口的外部高度
outerWidth	返回窗口的外部宽度
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的X位置
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的Y位置
parent	返回父窗口
self	返回对当前窗口的引用
status	设置窗口状态栏的文本
top	返回最顶层的先辈窗口

window对象常用的方法

方法名	含义
alert()	显示带有一段信息和一个确认按钮的警告框
blur()	把键盘焦点从顶层窗口移开
clearInterval()	取消setInterval()设置的timeout
clearTimeout()	取消setTimeout()设置的timeout
close()	关闭浏览器窗口
confirm()	显示一段信息和确认按钮就要取消按钮的对话框
focus()	把键盘焦点给予一个窗口
open()	打开一个新的浏览器窗口
prompt()	显示可提示用户输入的对话框
setInterval()	周期性定时器
setTimeout()	一次性定时器

❀  窗口和对话框

⑴  打开和关闭窗口

打开超链接的方式：

①  在当前窗口打开，可后退：

html：<a href="url">...</a>

js：window.open("url","_self");

②  在当前窗口打开，不可后退：

js：location.replace("url");

③  在新窗口打开，可同时打开多个：

html：<a href="url" target="_blank">

js：open("url","_blank");其实_blank可省略

④  在新窗口打开，只能打开一个：

html：<a href="url" target="?">

js：open("url","name");

☛  打开一个新窗口：

var pop=open("url","name",config)

config: 配置打开新窗口的大小和位置，"属性=值,..."

open方法会返回打开的新窗口对象

pop其实就是新窗口的window

⑵  窗口大小与定位

▪  窗口大小: 

整体大小：window.outerWidth/Height

文档显示区大小：window.innerWidth/Height

显示器的完整分辨率：screen.width/height

显示器去掉任务栏的剩余分辨率：screen.availWidth/Height

▪  设置大小：

resizeTo(newWidth,newHeight);

resizeBy(width增量,height增量)

强调: 不能自己修改自己的大小

▪   窗口定位：

▫  获得窗口位置坐标

左上角X坐标：

window.screenLeft/screenX

左上角Y坐标：

window.screenTop/screenY

事件发生时，鼠标距离显示器左上角的坐标：

event.screenX/Y

▫  设置窗口的位置：

window.moveTo(newLeft,newTop)；

window.moveBy(left的增量,top的增量)

❀  定时器：

多用于网页动态时钟，制作倒计时，跑马灯效果等；

定时器原理：

setXXX(fn,ms)

•  向定时器中添加一项任务: fn,ms

•  定时器会根据ms的间隔，自动调用fn；

•  先将fn加入回调队列callback queue等

•  等到主程序(ECS)中最后一条语句执行完，才能从callback queue中进入ECS执行。

⑴  周期性定时器

让程序按照指定的时间间隔反复执行同一任务

何时使用：

只要不需要用户干预，即可自动反复执行任务时。

 如何使用：

①  一项任务：函数

只规定了动画中，每一步执行的操作

②  启动定时器：

var timer=setInterval(fn,interval);

③  停止定时器：

clearInterval(timer);

timer=null;

timer: 定时器的序号！从1开始，连续不重复的数字

如何停止：

•  用户手动停止

•  都要在任务行数内设计自动停止机制

⑵  一次性定时器：

让程序先等待一段时间间隔，然后自动执行一次，自动停止。

用法（同周期性）：

①  任务函数：

②  启动定时器：

var timer=setTimeout(fn,wait);

wait: 等待的毫秒数

③  停止定时器：

clearTimeout(timer);

timer=null;

  ♕  关于回调函数（2种）：

▪  事件处理函数就是一种回调函数：

elem.click(); //this->elem

var me=this;//留住this

elem.οnclick=function(){

this->elem ; me->obj

};

   ▪  放入定时器中的任务函数

fn(); //this->window

setxxx(fn.bind(obj),ms)

✧  window常用子对象

✦  navigator对象

包含了所有浏览器的配置信息: 没有标准

①  判断cookie是否启用：

navigator.cookieEnabled

②  判断是否安装了指定插件(plugin)

navigator.plugins集合

③  判断浏览器名称和版本号(只支持5大浏览器)

navigator.userAgent

✦  location对象

保存当前窗口正在打开的url的对象

①   跳转: 只能实现在当前窗口打开

location.href="url";

location.assign("url");

location="url";

②  重新加载当前页面:

location.reload(false/true);

参数: 

false 表示是否强制从服务器硬盘获取最新文档。

③  在当前页面打开，禁止后退: 

location.replace("url");

打开新url，并用新url替换history中当前旧url，实现禁止后退

属性: 

例如：

http://tmooc.cn:8080/orders/orderDetails/index.html?username=zhangdong&kw=大鱼#top

location.protocol: 协议

location.host: 主机名+端口号

location.hostname: 主机名

location.port: 端口

location.pathname: 相对路径

location.search: ?及其之后的查询字符串

location.hash: #锚点名

✦  history对象

保存当前窗口打开后，成功访问过的url的历史记录

①  如何使用: 前进，后退，刷新

前进: history.go(1)

后退: history.go(-1)

刷新: history.go(0)

✦  screen对象

✦  event对象

浏览器自动触发或用户手动触发的页面元素状态的改变，比如: change  click  focus  blur 

事件处理函数:当事件发生时，自动触发执行的函数。

事件处理函数其实就是元素的一个特殊属性，属性的值是一个函数对象

比如: onchange  onclick   onfocus

elem.οnclick=function(){...}

当事件发生时，自动执行: elem.onclick();

♕  如何绑定事件处理函数（3种）:

①  在html中绑定:

<elem onXXX="js语句"

<button οnclick="fun(this)"

fun(obj){obj->btn  this->window  }

button.οnclick=function(){

 //this->btn

eval("fun(this)"); //obj->btn

}

问题: 

不符合内容和行为分离的原则；

其实不是真正的绑定，只是传入一条js语句而已。

②  在js中动态绑定: 

❀  elem.onxxx=function(){

this->elem

}

问题: 

一个事件处理函数只能绑定一个函数对象。

无法改变事件触发的顺序

❀   DOM:

elem.addEventListener("事件名",fun,false/true);

为elem元素的指定"事件"，绑定fun；

第三个参数: 

设置是否在捕获阶段触发

优: 

1. 为一个事件处理函数，绑定多个函数对象。当事件发生时，可同时执行多个任务。

2. 可以改变事件触发的顺序

VS IE8: 

elem.attachEvent("on事件名",fn );//没有第三个参数

********DOM事件模型(3个阶段): 

1. 捕获:由外向内，依次记录各级元素绑定的事件处理函数

捕获阶段只到目标元素截止

2. 目标触发: 默认实际触发事件的元素上的处理函数先执行。

目标元素: 实际触发事件的元素

3. 冒泡: 按照捕获阶段反向的顺序，依次执行各级父元素上的事件处理函数

VS IE8: 

事件模型:2个阶段：目标触发,冒泡

********event:事件对象:

当事件发生时，自动创建的，封装事件信息的对象。

如何获得: 

发生事件时，自动调用事件处理函数。此时js会将事件对象默认作为事件处理函数的第一个参数，放入函数。——DOM

elem.addEventListener("事件名",function(e){

//e->event

});

VS IE8: 

事件对象保存在全局变量event中,不作为第一个参数传入

兼容DOM和IE8：

e=e||window.event

如果e有效，就用e，否则用event

   

   取消冒泡: 

执行完当前元素的事件处理函数后，阻止冒泡向上执行。

e.stopPropagation();

VS IE8:

e.cancelBubble=true;

利用冒泡:

***优化: 

尽量减少事件监听的个数

解决: 

如果多个子元素绑定相同的事件处理函数，则只需要将事件处理函数绑定在父元素一次即可！

问题: 

如何获得目标元素:

this->会随冒泡而改变

解决:

e.target 始终保持目标元素V

VS IE8: 

target=e.target||e.srcElement

DOM          IE8

取消事件:

在事件执行过程中，如果出现问题，可阻止事件继续执行。更多是取消默认行为！

如何取消:

e.preventDefault();

VS return : 

preventDefault

阻止后续默认行为

不是停止当前函数执行

放前放后，对当前函数无影响

return: 

退出当前函数执行

但不阻止默认行为的执行

   举例：

form.onsubmit事件:当表单提交之前触发

事件坐标:

     1. 相对于屏幕左上角:

e.screenX/Y

     2. 相对于文档显示区左上角:

e.clientX/Y

兼容性问题: e.x/y

     3. 相对于所在的父元素左上角:

e.offsetX/Y