BOM day20

一、BOM:Browser Object Model:浏览器对象模型，专门用于操作浏览器：常用对象：histrory、location、navigator、screen、event

重要知识点：window（定时器）、event

1、window对象：扮演者两个角色：

（1）、代替了全局对象global

（2）、window->当前窗口

2、*打开新链接的方式：提升用户的体验感：

（1）、在当前窗口打开，可以后退

HTML:内容

JS：open("url","self")

（2）、在当前窗口打开，禁止后退：电商网站，付款后禁止后退

history:保存当前窗口的打开过的url（历史记录），有了历史浏览器才可以前进和后退

location:保存当前窗口正在打开的url

JS：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","自定义/随便");

每个窗口的底层都有一个name名称，如果_self找到当前窗口的名称，如果_blank随机出不重复的新名称，自定义：判断有没有这个窗口已经打开了，如果已经打开了，则替换此窗口

window别的属性和方法：

        打开小窗口：var newW=open("url","target/自定义","width=,height=,left=,top=");

        关闭窗口：window.close();newW.close();

        改变小窗口位置:newW.moveTo(x,y);

        改变小窗口的大小：newW.resizeTo(newWidth,newHeight);

        获取浏览器大小：outerWidth/outerHeight

        ***获取浏览器文档显示区域大小：innerWidth/innerHeight

        获取屏幕大小：screen.width/height

******扩展：获取鼠标的x/y坐标：

        事件函数的第一个形参会自动接住事件对象e->event

        获取鼠标的坐标：

                1、鼠标相当于屏幕的位置：e.screenX/Y

                2、鼠标相当于body的位置：e.clientX/Y

                ***3、鼠标相当于网页的位置：e.pageX/Y

二、*****定时器：

1、周期性：每过一段事件就会执行一次

        开启：timer=setInterval(callback,间隔毫米数)；

        停止：clearInterval(timer);

2、一次性：等待一段时间，只会执行一次就结束了

        开启：timer=setTimeout(callback,间隔号秒数)；

        停止：clearTimeout(timer);

三、循环、函数、定时器，都可以反复执行，他们的区别？

        循环1：一旦开页面，几乎瞬间就结束了；

        函数：调用几次就执行几次，或用户触发几次就执行几次

        定时器：每过一段事件就会执行一次