JS-DOM

DOM提供操作接口，用来获取三种关系的节点。其中，子节点接口包括firstChild（第一个子节点）和lastChild（最后一个子节点）等属性，同级节点接口包括nextSibling（紧邻在后的那个同级节点）和previousSibling（紧邻在前的那个同级节点）属性。

二、Node类型

1.属性

（1）nodeType 返回节点类型
document 9 element 1 attr 2 text 注释节点
（2）nodeName 返回节点纯大写名称
div.nodeName DIV

（3）nodeValue 返回元素文本节点返回字符串本身对元素节点不生效
div.文本.nodeValue
（4）fristChild 节点第一个孩子
（5）lastChild 节点最后一个孩子
<div>我是一个文本节点<span>我是行内元素<span></div>
（6）childNodes 返回的所有的孩子节点（包括文本注释元素节点..）是一个类数组对象 NodeList类数组
（7）children 返回所有元素孩子节点类数组对象
（8）nextSibling 获取节点的后一个节点
（9）previousSibling 获取节点的前一个节点
（10）parentNode 返回节点的父节点
（11）parentElement 返回节点的父元素节点
（12）hasChildNodes() 判断当前节点是否有子节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		/**
		 * 获取div
		 * 1.document 文档对象 window属性 getElementById
		*/
		//延迟代码执行 
		window.onload = function(){
			// 节点类型 nodeType 返回一个整数 document节点9 元素节点1 属性节点2 文本节点
			 console.log(one.nodeType,'1')//1 1
			//attributes可以获取一个对象中的一个属性
			 console.log(one.attributes.id.nodeType,'返回节点类型');//2 返回节点类型

			// nodeName 返回该节点的纯大写名称
			 console.log(one.nodeName);//DIV
			 console.log(document.body.nodeName);//BODY

			// nodeValue 返回文本字符串 nodeValue只给标签内部文本使用
			// firstChild属性返回当前节点的第一个子节点，如果当前节点没有子节点，则返回null，last则返回最后一个子节点。
			 console.log(one.firstChild.nodeValue);//我是一个块元素

			// 获取标签文本内容 textContent
			 console.log(one.textContent);
			/**
			 * 我是一个块元素
		
		       我是行内元素
			*/
			
			// 获取所有孩子节点 childNodes类数组对象 
			console.log(one.childNodes);//NodeList(5) [ #text, <!--  我是一个注释  -->, #text, span, #text ]
            /**
			 * 0: #text "\n\t\t我是一个块元素\n\t\t"
               1: <!--  我是一个注释  -->
               2: #text "\n\t\t"
               3: <span>
               4: #text "\n\t"
               length: 5
			*/

			// 将类数组对象转为数组 childNodes返回类数组对象
			console.log(Array.from(one.childNodes));//Array(5) [ #text, <!--  我是一个注释  -->, #text, span, #text ]
			 console.log([...one.childNodes]);
			 console.log(Array.prototype.slice.call(one.childNodes,0));

			// 获取元素的元素节点(获取当前元素的子元素) 返回所有元素孩子节点 类数组对象
			 console.log(one.children);//HTMLCollection { 0: span, length: 1 }

			/**
			 * previousSibling属性返回当前节点前面的、距离最近的一个同级节点。
			 * 如果当前节点前面没有同级节点，则返回null
			*/
			// 获取前一个节点 
			 console.log(two.previousSibling);//#text "\n\t"
			 console.log(one.previousSibling);//#text "\n\t"
			// // 获取后一个节点
			 console.log(one.nextSibling);//#text "\n\t"

			// 过滤出所有元素节点 childNodes children
			 console.log(document.body.childNodes)//NodeList(7) [ #text, div, #text, div#one.two, #text, div.two, #text]
			 var res = [...document.body.childNodes].filter(function(item){
			 	return item.nodeType === 1
			 });
			 console.log(res[0].nextSibling,'获取后一个节点')//#text "\n\t"
			 console.log(res[1].previousSibling,'获取前一个节点')//#text "\n\t"

			// 获取第一个孩子 
			 console.log(one.firstChild);//#text "\n\t\t我是一个块元素\n\t\t"
			// 获取最后一个孩子
			 console.log(one.lastChild);//#text "\n\t"

            //获取元素的元素节点(获取当前元素的子元素)
			 console.log(document.body.children[0]);//<div>
			 console.log(document.body.children[1]);//<div id="one" class="two">
			 console.log(document.body.children[2]);//<div class="two">

			// 检验一个节点有没有孩子节点 hasChildNodes()
			 console.log(document.body.children[0].hasChildNodes())//true
			
			/**
			 * 1.parentNode属性返回当前节点的父节点。对于一个节点来说，
			 * 它的父节点只可能是三种类型：元素节点(element)、文档节点(document)和文档片段节点(documentfragment)
			 * 2.parentElement属性返回当前节点的父元素节点。
			 * 如果当前节点没有父节点，或者父节点类型不是元素节点，则返回null
			*/
			// 获取节点父元素节点
		    console.log(one.parentNode);//<body>
			console.log(one.parentElement);//<body>
		}
	</script>
</head>
<body>
	<div> </div>
	<div id="one" class="two">
		我是一个块元素
		<!-- 我是一个注释 -->
		<span>我是行内元素</span>
	</div>
	<div class="two">我是一个块元素</div>
</body>
</html>

nodeType

属性返回一个整数值，表示节点的类型，常用节点类型如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		console.log(document.nodeType,'返回节点类型的值');
	</script>
</head>
<body>
	<!-- dom
		Document Object Model 文档对象模式 
		操作网页的api和接口 
	-->
	<!-- 文档所有的内容都可以看成节点 文本节点 元素节点 注释节点 属性节点  -->
	hello
	<div id="one">我是第一个div</div>
	world
	<div>我是第二个div</div>
	<!-- 我是注释 -->
</body>
</html>

2.方法

（1）操作节点只能由父节点去调用
       appendChild() 添加一个节点
       insertBefore(插入的节点,参考节点) 插入节点
       replaceChild(插入的节点,被替换节点) 替换节点
       removeChild(移除的节点) 删除节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-top: 10px;
		}
	</style>
	<script>
		// 页面加载完毕再执行代码 
		window.onload = function(){
			/**
			 * 操作节点 增删改插 只能由父节点来去调用 
			 * 新增节点 appendChild方法
			 * 参数：(新增节点)
			*/
			var body = document.body;
			// 新增一个插入body中  createElement 新增元素 新增标签
			var newNode = document.createElement('div');
			// 给标签设置内容 textContent innerHTML innerText
			newNode.textContent = 'four';
			// 插入新增的节点
			body.appendChild(newNode);
            ------------------------------------------------------

			/**
			 * 插入节点 insertBefore(插入的节点,参考的节点)
			*/
			// 获取参考的节点
			 var second = body.children[1];
			 body.insertBefore(newNode,second);
             -----------------------------------------------------
			/**
			 * 替换节点 replaceChild(新节点,被替换的节点)
			*/
			 var second = body.children[1];
			 body.replaceChild(newNode,second);
			------------------------------------------------------
			/**
			 * 移除节点方法 removeChild(要移除某一个节点)
			*/
			 var frist = body.children[0];
			 body.removeChild(frist);
		}
	</script>
</head>
<body>
	<div>one</div>
	<div>two</div>
	<div>three</div>
</body>
</html>

（2）克隆节点
       cloneNode 克隆节点克隆者调用
       参数：true false
       浅克隆：参数为false就是浅克隆只克隆节点本身不克隆内容
       深克隆：参数为true就是深克隆既克隆节点也克隆节点内容

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-top: 10px;
		}
	</style>
	<script>
		window.onload = function(){
			// 克隆节点，被克隆节点调用 cloneNode() 参数：true深克隆  false浅克隆 默认是false
			var second = document.body.children[1];
			// var four = second.cloneNode();//表示进行浅克隆 默认值是false
			var four = second.cloneNode(true);//表示进行深克隆
			document.body.appendChild(four);
			/**
			 * 深克隆和浅克隆区别？
			 * 1.浅克隆只克隆节点本身 不克隆节点内容
			 * 2.深克隆既克隆节点本身 还克隆节点内容
			*/
		}
	</script>
</head>
<body>
	<div>one</div>
	<div class="second">two</div>
	<div>three</div>
</body>
</html>

（3）获取节点内容

textContent 只能获取元素节点文本节点并且会保留代码格式

innerHTML 识别代码片段获取元素节点内容,包括元素节点并且也会保留代码格式

innerText 只能获取元素节点文本节点去除文本前后空格

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			/**
			 * 获取元素节点内容区别？ 
			 * 1.textContent 只能获取元素节点文本节点 并且会保留代码格式  
			 * 2.innerHTML 识别代码片段 获取元素节点内容,包括元素节点 并且也会保留代码格式
			 * 3.innerText 只能获取元素节点文本节点 去除文本前后空格
			*/
			var second = document.body.children[0];
			console.log(second.textContent,'1');
			console.log(second.innerHTML,'2');
			console.log(second.innerText,'3');
		}
	</script>
</head>
<body>
	<!-- <div>我是一个块级元素</div> -->
	<div>
		   我是一个   
		块级   元素
		<div>我是一个div</div>
	</div>
	<!-- <div>我是 一个 标签</div> -->
</body>
</html>

三、Document类型

1.属性

（1）documentElement 获取html元素
（2）body 获取body元素
（3）doctype 获取文档头声明
（4）url 获取地址
（5）title 获取选项卡标题
（6）referrer 获取页面来源
（7）domain 获取域名
（8）forms 获取所有表单元素
（9）links 获取所有的带有href属性a标签
（10）images 获取所有图片标签img

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>document类型</title>
	<script>
		window.onload = function(){
			// 1.获取html元素 
			console.log(document.documentElement);
			// 2.获取body标签
			console.log(document.body);
			// 3.获取文档头声明
			console.log(document.doctype);
			// 4.获取选项卡标题
			console.log(document.title);
			// 5.获取url路径
			console.log(document.URL);
			// 6.获取域名
			console.log(document.domain);
			// 7.获取页面来源url referrer 必须使用本地服务器
			console.log(document.referrer);
			// 8.获取页面中所有form
			console.log(document.forms);
			// 9.获取页面中所有img标签
			console.log(document.images);
			// 10.获取页面中所有带有href属性a标签
			console.log(document.links);
			// 文档中写入文本html表达式 js代码
			document.write('<div>我是一个div</div>');
		}
	</script>
</head>
<body>
	<form action=""></form>
	<form action=""></form>
	<form action=""></form>
	<img src="" alt="">
	<img src="" alt="">
	<img src="" alt="">
	<a href=""></a>
	<a ></a>
	<a href=""></a>
</body>
</html>

2.方法

获取dom元素

1.document.getElementById('one')

2.document.getElementsByTagName('div')[index]; {0:div,1:div,length}

3.document.getElementsByClassName('.two')[index]; {0:div,1:div,length}

4.document.querySelector('');.two <div class='two'></div>

5.document.querySelectorAll('.two')[index]; {0:div,1:div,length}

6.document.createElement('div');添加元素

7.document.write('写入代码');

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		/**
		 * 获取div
		 * 1.document 文档对象 window属性 getElementById
		*/
		//延迟代码执行 
		window.onload = function(){
			/*
			* 获取元素方法 getElementById getElementsByTagName getElementsByClassName
			*  querySelector querySelectorAll
			*/
			 var one = document.getElementById('one');//<div id="one" class="two">
			 var one = document.getElementsByTagName('div')[0];//<div>
			 var two = document.getElementsByClassName('two')[0];//<div id="one" class="two">
			
			/**
			 * querySelector用于查询页面中第一个符合规则的元素，
			 *可以在Document实例和Element实例上调用，接收一个选择器字符串参数，
			 *如果查找到则返回 HTMLElement 对象，否则返回null。*/
			// 返回文档中匹配指定的CSS选择器的第一元素:获取id为one的元素，只会获取第一个
			   var one = document.querySelector('#one');//<div id="one" class="two">
			  console.log(one);
			 /**
			  * querySelectorAll方法和querySelector方法类似，只是它是返回所有匹配的元素，类型是NodeList。
			 */
			// 返回文档中匹配的CSS选择器的所有元素节点列表:获取所有类包含two的元素
			var one = document.querySelectorAll('.two');//NodeList [ div#one.two, div.two ]
			var one = document.getElementById('one');//<div id="one" class="two">
		    console.log(one);
			var two = document.getElementsByClassName('two')[1];//<div class="two">
		    console.log(two);
		}
	</script>
</head>
<body>
	<div> </div>
	<div id="one" class="two">
		我是一个块元素
		<!-- 我是一个注释 -->
		<span>我是行内元素</span>
	</div>
	<div class="two">我是一个块元素</div>
</body>
</html>

<script>
  // 创建元素节点p
  var p = document.createElement('p');
  // 向p标签插入内容
  p.innerHTML = '我是一个p标签';
  // 将节点插入到body中
  document.body.appendChild(p);
--------------------------------------
document.write("<p>Hello world!</p>");
  document.write("<span>Hello DOM!</span>");
  document.write("Hello Weekend!");
</script>

四、Element类型

1.属性

classList 由类名组成的集合 ['','']
className 获取类名
attributes 获取属性组成的集合 ['id=one',class='two']
clienHeight获取元素内部高度
clineWidth获取元素内部宽度
clienTop获取元素距离上方宽高
clienLeft获取元素距离左侧宽高
innerHTML 识别代码片段 v-html
innerText

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			/**
			 * 元素节点属性和方法 
			*/
			var frist = document.getElementsByClassName('frist')[0];
			// 获取属性组成集合 frist.attributes.class
			// console.log(frist.attributes.class.nodeType,Array.isArray(frist.attributes));
			// 获取classList类名组成集合
			console.log(frist.classList);//DOMTokenList [ "frist" ]
			// 获取className 类名
			console.log(frist.className);//frist
			// 获取元素内部高度宽度 距离上方左侧宽高
			console.log(frist.clientWidth);
			console.log(frist.clientHeight);
			console.log(frist.clientTop);
			console.log(frist.clientLeft);
			// innerText innerHTML 获取元素内部内容
			// 返回标签名的纯大写名称
			console.log(frist.tagName);//DIV
---------------------------------------------------------------------------------
			/**
			 * 元素节点方法
			*/
			// 获取属性对应的属性值 参数：属性名
			console.log(frist.getAttribute('id'));//one
			// 设置属性 参数:属性名 属性值
			frist.setAttribute('title','我是标签的提示说明');
			// 设置自定义属性
			frist.setAttribute('flag','我是一个自定义属性');
			console.log(frist.getAttribute('flag'));
			console.log(frist.getAttribute('flag1'));
			console.log(frist.getAttribute('data-attr'));
			console.log(frist);

			// 自定义属性一般使用data-开头 标签可以直接读取自身属性  否则直接使用标签读取是undefined 
			console.log(frist.id,frist.className,frist.flag1);

			frist.innerHTML = '<span>我是行内元素</span>';
			frist.style.width='100px';
			frist.style.height='100px';
			frist.style.backgroundColor='red';
			frist.style.fontSize='28px';
		}
	</script>
</head>
<body>
	<div  class="frist" id="one" flag1="自定义属性" data-attr="hello dom">我是一个块级元素</div>
</body>
</html>

2.方法

getAttribute() 获取属性名对应的属性值
setAttribute('属性名','属性值') 设置属性
data-自定义属性 通过getAttribute去访问

五、Text

1.属性

length 长度
appendData();
insertData(formIndex,text); 插入文本
deleteData(formIndex,count);
replaceData(formIndex,count,text)
splitText(fromIndex) 返回后一个文本节点
substringData(fromIndex,count); 截取文本内容
createTextNode() 创建文本节点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="container">我是一个div</div>
	<script>
		/**
		 * 创建文本节点 createTextNode
		*/
		var newText = document.createTextNode('hello world');
		var div = document.getElementById('container');
		div.appendChild(newText);
		console.log(newText.length,newText.nodeType);
------------------------------------------------------------------------
		/**
		 * 替换文本节点内容 replaceData 参数：fromIndex count 替换的内容
		*/
		newText.replaceData(0,5,'hi');
------------------------------------------------------------------------
		/**
		 * 插入文本内容 参数 fromIndex 插入的内容
		*/
		newText.insertData(0,'dom');
-------------------------------------------------------------------------
		/**
		 * 增加文本内容 text
		*/
		newText.appendData('块级元素');
-------------------------------------------------------------------------
		/**
		 * 删除文本内容 参数：fromIndex 删除数量
		*/
		 newText.deleteData(0,10);
-------------------------------------------------------------------------
		/**
		 * 分成两个文本节点 splitText fromIndex
		*/
		var res = newText.splitText(5);
		 console.log(res);
-------------------------------------------------------------------------
		/**
		 * 截取文本节点内容 参数：fromIndex count
		*/
		var res = newText.substringData(6,5);
		console.log(res);
	</script>
</body>
</html>

2.方法（获取节点内容方法）

textContent 获取内部文本内容去除文本前后空格
innerHTML 识别代码片段解析标签保留代码格式
innerText 只能获取内部文本内容保留代码格式

一、2.（3）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			/**
			 * 获取元素节点内容区别？ 
			 * 1.textContent 只能获取元素节点文本节点 并且会保留代码格式  
			 * 2.innerHTML 识别代码片段 获取元素节点内容,包括元素节点 并且也会保留代码格式
			 * 3.innerText 只能获取元素节点文本节点 去除文本前后空格
			*/
			var second = document.body.children[0];
			console.log(second.textContent,'1');
			console.log(second.innerHTML,'2');
			console.log(second.innerText,'3');
		}
	</script>
</head>
<body>
	<!-- <div>我是一个块级元素</div> -->
	<div>
		   我是一个   
		块级   元素
		<div>我是一个div</div>
	</div>
	<!-- <div>我是 一个 标签</div> -->
</body>
</html>

六、DOM事件机制

事件三要素：

1.事件源
2.事件类型 click keyup keydown
3.事件处理程序

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			/**
			 * 1.获取dom元素 
			 * 2.给dom元素绑定事件
			 * 3.声明事件处理程序
			*/
			var div = document.querySelector('div');
			var button = document.querySelector('button');
			button.onclick = function(){
				div.style.width='100px';
				div.style.height='100px';
				div.style.backgroundColor='pink';
				div.style.fontSize='22px';
				div.innerText = 'hello dom';
			}
		}
	</script>
</head>
<body>
	<div>我是div</div>
	<button>点击我</button>
</body>
</html>

1.事件冒泡：事件从内向外触发至document对象

阻止事件冒泡：event.stopPropagation()

event.target和event.currentTarget区别？
target——表示目标事件源当前事件是被谁触发的 target指向谁
cuurentTarget——表示当前正在触发事件的dom元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.outer{
			width: 300px;
			height: 300px;
			background-color: red;
			margin: 0 auto;
			padding: 50px;
			box-sizing: border-box;
		}
		.center{
			width: 200px;
			height: 200px;
			background-color: pink;
			padding: 50px;
			box-sizing: border-box;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-image:linear-gradient(to right,red,pink,blue);
		}
	</style>
	<script>
		window.onload = function(){
			/**
			 * 给dom元素绑定事件 
			 * 1.获取dom元素
			 * 2.给dom绑定事件
			*/
			var outer = document.querySelector('.outer');
			var center = document.querySelector('.center');
			var inner = document.querySelector('.inner');
			outer.onclick = function(){
				alert('我是outer');
				console.log(event.target,'触发事件目标源');
				console.log(event.currentTarget,'当前正在执行事件的dom元素');
			}
			center.onclick = function(){
				alert('我是center');
				// event.stopPropagation();
				console.log(event.target,'触发事件目标源');
				console.log(event.currentTarget,'当前正在执行事件的dom元素');
			}
			inner.onclick = function(){
				alert('我是inner');
				// 阻止事件冒泡 event 表示当前事件对象 
				// console.log(event,'事件对象');
				// event.stopPropagation();
				console.log(event.target,'触发事件目标源');
				console.log(event.currentTarget,'当前正在执行事件的dom元素');
			}
		}
	</script>
</head>
<body>
	<div class="outer">
		<div class="center">
			<div class="inner"></div>
		</div>
	</div>
</body>
</html>

2.事件捕获：事件从外向内触发至最小dom元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.outer{
			width: 300px;
			height: 300px;
			background-image:radial-gradient(red,pink,cyan);
			margin: 0 auto;
			padding: 50px;
			box-sizing: border-box;
			/**盒子模型
			标准盒子模型，一般浏览器也都默认为标准盒子模型。即：box-sizing:content-box
			怪异盒子模型，一般根据实际项目需要自行设置。即：box-sizing:border-box*/
		}
		.center{
			width: 200px;
			height: 200px;
			background-color: red;
			padding: 50px;
			box-sizing: border-box;
		}
		.inner{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
	</style>
	<script>
		window.onload = function(){
			//querySelector()可以直接加点击事件，而querySelectorAll()不能直接加点击事件
			var outer = document.querySelector('.outer');//获取文档中的class=outer的元素
			var center = document.querySelector('.center');
			var inner = document.querySelector('.inner');
			function handler1(){
				console.log('outer')
			}
			function handler2(){
				console.log('center')
			}
			function handler3(){
				console.log('inner')
			}
			/**
			 * addEventListener(事件类型,事件处理程序,false/true 默认是false)
			 * 表示事件在冒泡阶段执行 
			 * true 表示事件在捕获阶段执行 
			*/
			outer.addEventListener('click',handler1,true);
			center.addEventListener('click',handler2,true);
			inner.addEventListener('click',handler3,true);
		}
	</script>
</head>
<body>
	<div class="outer">
		<div class="center">
			<div class="inner"></div>
		</div>
	</div>
</body>
</html>

3.DOM事件流

事件流

描述的是页面接受事件的顺序
包括事件冒泡和事件捕获

机制：事件捕获--->到达目标---->事件冒泡

4.DOM0和DOM2事件处理程序

dom0级和dom2级事件区别？

1.dom0级绑定事件使用on关键字绑定解绑on事件类型设置为null

2.dom2级事件绑定使用addEventListener 解绑使用removeEventListener

3.dom0级事件不可以追加同一类型事件追加就是覆盖

4.dom2级事件可以追加同一类型事件追加就依次执行

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			var btn = document.querySelector('button');
			// dom0级事件绑定 on事件类型  dom0级不可以追加同一类型事件 追加执行最后一次事件处理程序
			btn.onclick = function(){
				/**
				 * 使用 DOM0 方式为事件处理程序赋值时，所赋函数被视为元素的方法。
				 * 因此，事件处理程序会在元素的作用域中运行，即 this 等于元素。
				*/
				console.log(this)
			}
			// 追加事件 
			btn.onclick = function(){
				alert('第二次事件')
			}
			// dom0级事件解绑 
			btn.onclick = null;

			/**
			 * dom2级事件 addEventListener('事件类型',事件处理程序,true/false)
			 * true表示执行事件捕获 false表示执行事件冒泡 默认是false
			 * dom2级事件可以追加事件
			*/
			function handler1(){
				console.log(this)
			}
			function handler2(){
				alert('第二次事件')

			}
			btn.addEventListener('click',handler1);
			btn.addEventListener('click',handler2);

			// dom2级事件解绑removeEventListener('事件类型',具名函数事件处理程序)
			// function add(){}
			btn.removeEventListener('click',handler1);
		}
	</script>
</head>
<body>
	<button>点击我</button>
</body>
</html>

5.事件对象-阻止默认事件发生

preventDefault()方法：用于阻止特定事件的默认动作。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			var input = document.querySelector('input');
			var a = document.querySelector('a');
			input.onclick = function(){
				// 阻止input标签默认提交行为
				event.preventDefault()
			}
			a.onclick = function(){
				// 阻止a标签默认跳转行为
				event.preventDefault()
			}
		}
	</script>
</head>
<body>
	<form action="text.php">
		<input type="submit" value="提交">
	</form>
	<a href="https:///www.baidu.com">跳转到百度</a>
</body>
</html>

点击提交和跳转到百度不会跳转到其它页面

6.事件委托

利用事件冒泡只指定一个事件处理程序就可以管理某一类型的事件将本应该绑定给子元素的事件绑定给父元素
目的：减少浏览器的重排和重绘优化页面性能减少事件执行的次数给新增的元素绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			var ul = document.querySelector('ul');
			// 给所有li绑定事件 点击的时候背景色变成红色 
			var lis = document.querySelectorAll('li');
			// for(var i=0;i<lis.length;i++){
			// 	lis[i].onclick = function(){
			// 		this.style.backgroundColor = 'red'
			// 	}
			// }
			var newLi = document.createElement('li');
			newLi.innerText ='第11个li'
			ul.appendChild(newLi);
			/**
			 * 事件委托 将子元素事件代理给父元素 只绑定一次事件 管理一类事件
			*/
			ul.onclick = function(){
				// event 事件对象 event.target 
				// event.target.style.backgroundColor = 'red'
				var target = event.target;
				if(target.tagName === 'LI'){
					target.style.backgroundColor = 'red'
				}
			}
		}
	</script>
</head>
<body>
	 <ul>
		<li>第1个li</li>
		<li>第2个li</li>
		<li>第3个li</li>
		<li>第4个li</li>
		<li>第5个li</li>
		<li>第6个li</li>
		<li>第7个li</li>
		<li>第8个li</li>
		<li>第9个li</li>
		<li>第10个li</li>
	 </ul>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			var ul = document.querySelector('ul');
			// 点击不同li内部内容 发生不同改变
			// var item1 = document.querySelector('#frist');
			// var item2 = document.querySelector('#second');
			// var item3 = document.querySelector('#three');
			// item1.onclick = function(){
			// 	this.innerText = 'hello html'
			// }
			// item2.onclick = function(){
			// 	this.innerText = 'hello css'
			// }
			// item3.onclick = function(){
			// 	this.innerText = 'hello js'
			// }
			ul.onclick = function(){
				var target = event.target;
				// console.log(target);
				switch(target.id){
					case 'frist':
						target.innerText = 'hello html';
						break;
					case 'second':
						target.innerText = 'hello css';
						break;
					case 'three':
						target.innerText = 'hello js';
						break;
					default:
						target.innerText = '我是li标签'
				}
			}
		}
	</script>
</head>
<body>
	<ul>
		<li id="frist">li标签</li>
		<li id="second">li标签</li>
		<li id="three">li标签</li>
	</ul>
</body>
</html>

7.事件类型

Web 浏览器中可以发生很多种事件。如前所述，所发生事件的类型决定了事件对象中会保存什么信息。DOM3 Events 定义了如下事件类型。

用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。

焦点事件（FocusEvent）：在元素获得和失去焦点时触发。

鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。

滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。

键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。

输入事件（InputEvent）：向文档中输入文本时触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		div{
			width: 100px;
			height: 100px;
			border: 1px solid royalblue;
			overflow: auto;
		}
	</style>
	<script>
		window.onload = function(){
			var input = document.querySelector('input');
			/**
			 * 绑定选择事件 在输入框选择字符时候就触发
			*/
			input.onselect = function(){
				console.log('我被选择了');
				console.log(window.getSelection().toString());
			}
---------------------------------------------------------------------
			/**
			 * resize 方法 窗口进行缩放时候触发
			*/
			 document.body.onresize = function(){
			 	console.log(window.outerHeight,window.outerWidth)
			 }
---------------------------------------------------------------------
			/**
			 * scroll 事件 绑定滚动事件 
			*/
			var div = document.querySelector('div');
			 div.onscroll = function(){
			 	console.log('我在滚动')
			 }
---------------------------------------------------------------------
			/**
			 * 聚焦focus 失焦 blur
			*/
			 input.onfocus  = function(){
			 	this.style.backgroundColor = 'pink'
			 }
			 input.onblur = function(){
			 	console.log('请单击输入框')
			 }
---------------------------------------------------------------------
			/**
			 * 双击 dbclick
			*/
			div.ondblclick = function(){
				console.log('我被双击了')
			}
---------------------------------------------------------------------
			/**
			 * 鼠标移入 鼠标移除 鼠标一直移动
			*/
			div.onmouseenter = function(){
				console.log('鼠标移入')
			}
			div.onmouseleave = function(){
				console.log('鼠标移出')
			}
			div.onmousemove = function(){
				console.log('鼠标一直在移动')
			}
			
		}
	</script>
</head>
<body>
	<div>我是一个div我是一个div我是一个div我是一个div
		我是一个div我是一个div我是一个div我是一个div
		我是一个div我是一个div我是一个div我是一个div
		我是一个div我是一个div我是一个div我是一个div我是一个div
	</div>
	<input type="text">
</body>
</html>

键盘事件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script>
		window.onload = function(){
			var input = document.querySelector('input');
			//键盘按下事件 keydown 按键 keyCode
			input.onkeydown = function(){
				console.log(event.keyCode)
			}
			// 键盘抬起事件 keyup 
			input.onkeyup = function(){
				console.log('我被抬起了')
			}
			// 键盘持续按下事件 
			input.onkeypress=function(){
				console.log('持续按下')
			}
			//输入框输入事件 获取文本输入值
			input.addEventListener('textInput',function(event){
				console.log(event.data)
			});
		}
	</script>
</head>
<body>
	<input type="text">
</body>
</html>

onload 在 window 上当页面加载完成后触发
   unload 当页面完全卸载后在window上触发
   resize 浏览器窗口大小发生改变
   select 输入框选择字符时候会触发
       window.getSelection().toString() 火狐不支持谷歌支持
   click 单击时候触发
   dbclick 双击时候触发
   keydown 键盘按下
   keyup 键盘抬起
   keypress 持续按下
   mouseenter 鼠标移入
   mouseleave鼠标离开
   mousemove 鼠标一直移动
   textInput 输入框输入事件
       event.data
   火狐不支持谷歌支持