BOM window对象递归事件委托1、BOM：Browser Object Model：浏览器对象模型，专门用于操

1、BOM：Browser Object Model：浏览器对象模型，专门用于操作浏览器的，但是他使用的不多，远不如ES和DOM，浏览器很多操作都是自带的，而且BOM没有标准：各个浏览器都有自己的定义，但是大部分浏览器都是一致规范的，唯独老IE（8-）

window对象：扮演着两个角色： 1、代替全局对象global：保存着全局变量和全局函数 2、【指代当前窗口本身】

打开链接的几种方式1、*打开链接的新方式： 1、当前窗口打开，可以后退 HTML：内容 JS：open("url","_self");

history：当前【窗口的历史记录】，他其实可以做的事儿就是前进后退 location：当前【窗口的正在打开的url】，而他有一个API叫做 location.replace("新url");//叫做替换，不叫作跳转，不会产生历史记录，自然也就不能前进后退，但是网址都替换，网页必然会发生变化

、新窗口打开，可以打开多个： HTML：内容 JS：open("url","_blank");

新窗口打开，只能打开一个，使用场景：比如电商网站，只允许用户打开一个结账界面 HTML：内容 JS：open("url","自定义一个name");

打开新窗口/新连接：var newW=open("url","target","width=?,height=?,left=?,top=?");

	关闭窗口：window/newW.close()
	改变新窗口的大小：newW.resizeTo(新宽,新高)
	改变新窗口的位置：newW.moveTo(新X,新Y)
	*window提供的三个框：- 换一个浏览器，样式就不一样了
		警告框：alert("警告文字");
		输入框：var user=prompt("提示文字");
		确认框：var bool=confirm("提示文字");

本地/客户端存储技术：保存着在浏览器里面的数据 cookie：淘汰了，存储大小只有2kb，而且操作极其复杂，尤其要到处切割的，最多只能保存30天 webStorage：H5（概念统称）带来的一个新特性，存储的大小由8mb，永久保存，而且操作非常简单！分类2种： 1、sessionStorage - 会话级，只要浏览器一旦关闭，数据就会死亡 2、localStorage - 本地级，只要不你清空他，他就永远存在两者的用法是一摸一样的，不用创建，可以直接使用

			操作：
				1、添加：xxxxStorage.属性名="属性值";
				2、读取：xxxxStorage.属性名
				3、删除：xxxxStorage.removeItem("属性名");
				4、清空：xxxxStorage.clear();//删全部

BOM的核心属性 BOM的常用对象：最重要的三个东西：定时器、客户端存储技术、event 1、history对象：保存了当前窗口的历史记录（过去的url）前进：history.go(1); 后退：history.go(-1); 刷新：history.go(0);

ul的组成部分都由那些组成 1、协议：https（加密）/http（未加密）/ftp(传输文件) /ws（直播） - 前两个都属于叫做请求 - 响应模型，专门用于实现网站开发 2、主机号|ip地址|域名：域名是需要花钱购买的，主机号|ip地址是免费的，127.0.0.1才真的叫主机号，只能自己访问自己 3、端口号：https默认端口为443，http默认端口为80，只有默认端口可以省略不写！ 4、***文件的相对路径|路由：百度加密了 - 如果以后学习了服务器端，我们可以配置好一些选项，用户就可以在自己电脑上，看到我们的东西了 5、***查询字符串|请求消息：前端传输到后端的东西，前端对后端说的话，就是form表单get提交带来的东西

属性：获取url的5个部分的内容，但是不需要记忆，你直接输出location对象即可查看
	协议：location.protocal
	域名：location.hostname
	端口号：location.port
	路由：location.pathname
	请求消息：location.search

查找他的元素 1、查找元素： 1、通过关系找元素：前提：至少要找到一个元素，才可以调用关系网父：xx.parentNode; 子：xx.children; - 集合第一个儿子：xx.firstElementChild; 最后一个儿子：xx.lastElementChild; 前一个兄弟：xx.previousElementSibling; 后一个兄弟：xx.nextElementSibling;

2、直接找元素：2大类：通过HTML的特点去查找元素 1、var elems=document.getElementsByXXXXXX();//返回的是一个动态集合HTMLCollection

		2、第二大类：2个：通过CSS选择器去查找元素
			1、var elem=document.querySelector("任意css选择器");
				缺陷：只能找到单个元素，如果匹配到多个，也只会返回第一个，没找到，返回null
				一次只能操作一个元素，不舒服

			2、***var elems=document.querySelectorAll("任意css选择器");
				优点：
					1、找到了是一个集合，没找到是一个空集合
					2、复杂查找时，非常简单
					3、返回的是一个静态集合NodeList

递归：简单来说就是再函数之中再一次调用了函数自己，迟早有一天会停下来！递归 vs 纯循环：递归：优点：简单易用缺点：性能低纯循环：优点：几乎不占用内存缺点：难得很

2、绑定事件：3种方式 1、在HTML页面上书写事件属性： <elem on事件名="函数名(实参)"> 缺点： 1、不符合内容（HTML）与样式（CSS）与行为（JS）的分离 2、无法动态绑定，一次只能绑定一个元素 3、不支持绑定多个函数对象

2、*在JS中使用事件处理函数属性：
	elem.on事件名=function(){操作}

	优点：
		1、符合内容（HTML）与样式（CSS）与行为（JS）的分离
		2、可以动态绑定

	缺点：
		1、不支持绑定多个函数对象 - 我个人觉得这其实不是缺点

3、*在js中使用事件API：如果不用考虑老IE，他还是不错的
	主流：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、支持绑定多个函数对象
	缺点：有兼容性问题

事件委托事件周期：从事件发生，到所有事件处理函数执行完毕的全过程： 3个阶段：捕获阶段：由外向内，记录着要发生的事件有哪些目标优先触发：目标元素->当前点击的实际发生事件的元素冒泡触发：由内向外，依次执行我们之前记录着的要发生的事件

事件委托/利用事件冒泡 - 开发中常用：提升网页性能，有了它我们的事件函数也可以简化为箭头函数了优化：如果多个子元素定义了相同或相似的事件操作，那么最好只给【父元素定义一次】为什么：每一次绑定一个事件函数，其实都是创建了一个事件对象，创建的对象越多，网页的性能就越差淘汰了this，他水性杨花，当前元素认识一个【目标元素】target：实际触发事件的元素主流：e.target; 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素!!!!! 老IE：e.srcElement; 兼容：e.srcElement;//第3次见到小三上位，不光老IE可用，主流也可用

组织浏览器的默认行为：比如：a标签默认就可以跳转，提交按钮可以提交表单，右键自带一个弹出框，F12自带一个控制台，F5自带刷新，F11自带全屏... 主流：e.preventDefault(); 老IE：e.returnValue=false; 兼容：e.returnValue=false;//第4次见到小三上位，不光老IE可用，主流也可用

右键事件 - window.oncontextmenu 键盘事件：一般用于游戏开发比较多 + 都要搭配上键盘的键码 *window.onkeydown - 按下和按住都会触发，任何键盘按键都可以触发 window.onkeypress - 按下和按住都会触发，但是只有数字、字母、回车、空格可以触发，其他人不行 window.onkeyup - 松开按键才会触发，任何键盘按键都可以触发

BOM window对象 递归 事件委托

BOM window对象递归事件委托