BOM

挖掘机001
133 阅读7分钟

BOM01

1、BOM概述：Browser Object Model - 浏览器对象模型：

专门为操作浏览器准备的一些对象，没有任何标准，不像DOM由W3C制定标准，所以存在很大的兼容性问题，使用率相对DOM较少
BOM有哪些对象：window、history、navigator、location、screen、event
个人认为重要的只有两个对象：window、event

2、window对象：在浏览器中扮演着两个角色：

1、代替了Global

    充当全局对象 - 保存着全局变量和全局函数

2、指代当前窗口本身

3、*打开网页的新方式：

     知道了：1、跳转用不用a标签无所谓
	   2、有点点用：提升用户的体验感，前端是距离用户最近的，多为用户做考虑
	   3、a标签的作用
	1、当前页面打开，可以后退：
		HTML：<a href="url">内容</a>
		      JS：open("url","_self");

	2、当前页面打开，禁止后退：何时：电商网站：结账过后不允许后退了
		HTML：做不了
		      JS：history：当前窗口的历史记录，只有当前窗口有了历史记录才能前进后退
		             location：当前窗口的正在打开的url网址，提供一个方法：
			location.replace("新url"); - 不叫作跳转，叫做替换，当时网址被替换了，页面也会跳转，但是不会产生历史记录

	3、在新窗口打开，可以打开多个
		HTML：<a href="url" target="_blank">内容</a>
		      JS：open("url","_blank");

	4、在新窗口打开，只能打开一个：何时：电商网站：购物车跳转到结账页面，结账页面只允许打开一个
		HTML：<a href="url" target="自定义name">内容</a>
		      JS：open("url","自定义name");
		其实在每一个窗口的底层都有一个名字name，_self指向的自己当前的名字
						       _blank始终会得到一个新名字
		如果自定义名称，那么浏览器会发现这个窗口已经打开过了，那再次打开时，会把原来的窗口给替换掉

	扩展：a标签的作用
		1、跳转
		2、锚点
		3、下载：<a href='xx.rar/zip/exe'>文字</a>
		4、打开：<a href='xx.txt/图片后缀'>文字</a>
		5、运行js - a标签不需要绑定事件：<a href='javascript:js代码;'>文字</a>

4、属性和方法：

	打开新窗口：var 新窗口=open("url","target/自定义","width=,height=,left=,top=");
		特殊：1、没有加第三个参数的时候，我们的新窗口会和浏览器融为一体
		           2、添加上第三个参数的时候，我们的新窗口就会脱离浏览器独立存在，而且可以把他保存起来
	关闭窗口：window/新窗口.close();
	移动窗口：新窗口.moveTo(x,y);
	修改窗口的大小：新窗口.resizeTo(newW,newH);

	获取屏幕的大小：screen.width/height
	获取浏览器的完整大小：outerWidth/Height
	获取浏览器文档显示区域的大小：innerWidth/Height

扩展：event对象可以获取鼠标的位置：2步

	1、在你的事件处理函数中的第一个形参会自动获取到事件对象event
	2、获取鼠标的位置：
		获取鼠标相对于屏幕的坐标：e.screenX/Y
		获取鼠标相当于文档显示区域的坐标：e.clientX/Y
		获取鼠标相当于网页的坐标：e.pageX/Y

5、定时器：

    等待一段时间才会执行的代码，可能会反复执行，也可能只会执行一次
     两种：
	1、周期性定时器
		开启：timer=setInterval(回调函数,延时);
		停止：clearInterval(timer);

	2、一次性定时器
		开启：timer=setTimeout(回调函数,延时);
		停止：clearTimeout(timer);
     特殊：1、不管是一次性还是周期性，底层其实都是一样的，甚至两者可以互换
	2、一次性<=>周期性

面试题：函数和循环和定时器，都可以反复执行代码，区别在哪里？- 时机

	1、函数：要么程序员调用几次执行几次，要么用户触发几次执行几次
	2、循环：几乎是一瞬间就完毕了
	3、定时器：需要先等待一段时间才会执行

BOM02

1、history:保存着当前窗口的历史记录 - 浏览器自带此功能

前进：history.go(1);
后退：history.go(-1);
刷新：history.go(0);

2、navigator： 保存着当前浏览器的基本信息（浏览器名称以及版本号）

通过js判断用户打开的是什么浏览器 - 相当于js版本的css hack（专门为老IE准备），对不同的浏览器可以执行不同的操作
就一个属性：navigator.userAgent;
见：03.html - 说白就是想办法拿到你想要的部分
不重要 - 现在大部分的操作前辈们都提供了兼容的方式，不需要自己判断浏览器是什么

3、***location：保存着当前窗口的正在打开url

知道：1、常识：一个url由哪些部分组成
		https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=%E7%A2%89%E5%A0%A1%E5%95%A6&fenlei=256&rsv_pq=c4aa123e001170d6&rsv_t=e860GzuTAOhvsNAJlqpqWOqgcsjzPtFxZboY5eyJI1dpBhBE6sqLqUDY2Iw&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=10&rsv_sug1=3&rsv_sug7=100&rsv_sug2=0&rsv_btype=i&prefixsug=%25E7%25A2%2589%25E5%25A0%25A1%25E5%2595%25A6&rsp=4&inputT=3405&rsv_sug4=3404
		http://127.0.0.1:8020/bom02/new/03%E5%88%A4%E6%96%AD%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BB%A5%E5%8F%8A%E7%89%88%E6%9C%AC%E5%8F%B7.html

		一定由5份组成：
		1、协议：http/https
		2、主机号/域名：但是域名是需要花钱购买的，白嫖就只能用主机号
		3、端口号：默认端口可以省略不写，http默认为80，https默认为443
		4、文件的相对路径：百度加密了
		5、查询字符串/请求消息：客户端向服务器端发起的请求消息：表单提交带来的东西

		协议名://主机号|域名:端口号/文件的相对路径?查询字符串

		而且，location对象就可以获取到这5部分：不需要记忆，直接console.log(location)输出进行观察

           2、可以干什么：跳转页面
		location="新url"
		location.href="新url"
		location.assign("新url")

		跳转页面，禁止后退：location.replace("新url") - 不会产生历史记录

		刷新：location.reload();

4、*****event：事件对象

什么是事件：用户触发的 或 浏览器自动触发 的

绑定事件：3种

1、在HTML标签上添加事件属性

		<elem on事件名="js代码"></elem>
	
	     缺点：1、不符合我们内容html与样式css与行为js的分离
		2、一次只能绑定一个元素，不能动态绑定事件
		3、一个事件只能放入一个事件处理函数

*2、在js中，使用事件处理函数属性绑定事件：

		elem.on事件名=function(){

		}

	     优点：1、符合我们内容html与样式css与行为js的分离
		2、动态绑定事件
	     缺点：一个事件只能放入一个事件处理函数，我个人觉得不算缺点，你为什么不把代码放到一起？

3、绑定事件的API

		主流：elem.addEventListener("事件名",callback);
		老IE：elem.attachEvent("on事件名",callback);
		兼容：if(elem.addEventListener){
				elem.addEventListener("事件名",callback);
		           }else{
				elem.attachEvent("on事件名",callback);
		           }

	      优点：1、符合我们内容html与样式css与行为js的分离
		2、动态绑定事件
		3、一个事件只能放入多个事件处理函数
	      缺点：不兼容老IE - 麻烦

4、事件周期：3个阶段

		1、捕获阶段：记录要执行的事件有哪些，由外向内
		2、目标触发阶段：目标元素：实际触发事件的元素
		3、冒泡执行阶段：由内向外的冒泡执行

5、如何获取事件对象event：

		主流：事件处理函数的第一个形参会自动获得
		老IE：window.event;
		兼容：e=event;
		第二次小三上位：window.event，主流也支持

		只有你获取到了事件对象event才可以做后续5个操作：
			*1、获取鼠标的坐标

			*2、阻止冒泡：- 不要用，用了就不能利用冒泡了，鄙视/面试
				主流：e.stopPropagation();
				老IE：e.cancelBubble=true;
				兼容：if(e.stopPropagation){
						e.stopPropagation();
					}else{
						e.cancelBubble=true;
					}

		       *****3、利用冒泡：也叫做事件委托：多个子元素都共有一个事件，把事件绑定在父元素身上，通过利用冒泡，点击儿子，父元素的事件也会触发
				为什么：绑定的时间越多，创建的事件监听对象也就越多，网站性能就会越低下
				何时：任何一个功能都要做成事件委托
				              当前元素：this -> 水性杨花（在不同的场景，指向的人是不一样的）
				学会找到目标元素：永远是你事件触发的元素
					主流：e.target;
					老IE：e.srcElement;
					兼容：var target=e.srcElement;
					第三次小三上位：e.srcElement，主流也支持！

			*4、组织浏览器的默认行为：- 看你需不需要阻止
				比如：阻止右键(window.oncontextmenu)会弹出一框框，阻止键盘事件window.onkeydown（F12 、F5...）...
				主流：e.preventExtensions();
				老IE：e.returnValue=false;
				兼容：if(e.preventExtensions){
						e.preventExtensions();
					}else{
						e.returnValue=false;
					}

			 *5、获取键盘键码：不需要记忆，直接console.log(e.keyCode); - 一般出现在游戏开发
avatar
文章
阅读
粉丝