BOM-2

性感颜老师
122 阅读4分钟

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：事件对象

什么是事件：用户触发的 或 浏览器自动触发 的
1、绑定事件：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); - 一般出现在游戏开发

BOM-1 - 掘金 (juejin.cn)

avatar
文章
阅读
粉丝