DOM事件

一、addEventlistener()方法

addEventListener() 方法为指定元素指定事件处理程序；为元素添加事件处理程序而不会覆盖已有的事件处理程序；且使我们更容易控制事件如何冒泡作出反应。

 特点：1、能够向一个元素添加多个事件处理程序

            2、能够向一个元素添加多个相同类型的事件处理程序，如两个“click”事件

            3、能够向任何DOM对象添加事件处理程序而非仅仅HTML元素，如window对象

当使用 addEventListener() 方法时，JavaScript 与 HTML 标记是分隔的，已达到更佳的可读性；即使在不控制 HTML 标记时也允许您添加事件监听器；通过使用 removeEventListener() 方法轻松地删除事件监听器。

二、语法 

btn.addEventListener('click',function;ture);

 第一个参数是事件的类型（比如 "click" 或 "mousedown"）。

第二个参数是当事件发生时我们需要调用的函数。

第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

注意：请勿对事件使用 "on" 前缀；请使用 "click" 代替 "onclick"。

示例： 

btn.addEventListener('click',showmsg();//这里showmsg括号不需要写,写了函数会直接执行了

 btn.addEventListener('click',showmsg);           

function showmsg(){

      console.log('点击了3');

 }

 

三、监听事件 

 传统的监听方式 事件会被覆盖 这里只会执行后面的点击了2

 btn.onclick = function(){
 	console.log('点击了1');
 }
 btn.onclick = function(){
 	console.log('点击了2');
}

 现在的监听方式  这里 2个点击事件都会被执行

btn.addEventListener('click',function(){
 	console.log('点击了1');
 })
 btn.addEventListener('click',function(){
 	console.log('点击了2');
 })

传统的事件删除方式

btn.onclick = function(){
 	console.log('点击了')
 }
 btn.onclick = null;

 现在的监听方式 删除事件

 

btn.addEventListener('click',showmsg);
function showmsg(){
	console.log('点击了3');
}
btn.removeEventListener("click",showmsg);

 

四、事件流

 在 HTML DOM 中有两种事件传播的方法：冒泡和捕获。

 冒泡事件

<div class="father">
			<div class="son">点击事件</div>
		</div>
		<script type="text/javascript">
			//现在我们给这2个div标签都加点击事件 那么事件执行的流程是什么样的 谁先执行 谁后执行？
			var father = document.querySelector('.father');
			var son = document.querySelector('.son');
			father.addEventListener('click',function(){
				alert('father');
			})
			son.addEventListener('click',function(e){
				alert('son');
				//阻止冒泡事件
				 e.stopPropagation();
			})
			document.addEventListener('click',function(){
				alert('document');
			})
			// 结果 从里到外执行 son - father - document(html) ->事件冒泡/冒泡事件
			 
		</script>

 在冒泡中，最内侧元素的事件会首先被处理，然后是更外侧的：首先处理 <p> 元素的点击事件，然后是 <div> 元素的点击事件。

捕获事件 

<div class="father">
			<div class="son">点击事件</div>
		</div>
		<script type="text/javascript">
			//现在我们给这2个div标签都加点击事件 那么事件执行的流程是什么样的 谁先执行 谁后执行？
			var father = document.querySelector('.father');
			var son = document.querySelector('.son');
			
			 //结果是 从外到里执行  document - father - son  ->捕获事件
			 // father.addEventListener('click',function(){
			 // 	alert('father');
			 // },true)
			 // son.addEventListener('click',function(){
			 // 	alert('son');
			 // },true)
			 // document.addEventListener('click',function(){
			 // 	alert('document');
			 // },true)
		</script>

在捕获中，最外侧元素的事件会首先被处理，然后是更内侧的：首先处理 <div> 元素的点击事件，然后是 <p> 元素的点击事件。

五、removeEventListener() 方法

removeEventListener() 方法会删除已通过 addEventListener() 方法附加的事件处理程序