js事件委托解析

前言

本文章虽然讲的是事件委托，但是会连带讲很多相关的知识点，如果觉得啰嗦，可直接看一的概念和五的实现函数哈

一、什么是事件委托

事件委托的原理就是利用事件冒泡，即把子元素所需要响应的事件绑定到父元素，通过子元素事件冒泡到父元素，然后父元素通过绑定的事件中的target去判断是哪个子元素，从而做对应处理。这样事件只需绑定到父元素即可而不需要每个子元素都去绑定事件，这样大大提高了性能。可事件委托的事件有click、mousedown、mouseup、keydown、keyup、keypress 等

二、事件流（事件触发过程）

DOM2级事件规定一个事件的完整过程，首先是捕获阶段然后是目标阶段最后是冒泡阶段。捕获阶段就是从document逐层向内进行传播，目标阶段就是触发事件的元素，冒泡阶段是从内到外再次回到document。

三、addEventListener

addEventListener用于为元素绑定事件的方法，其语法如下

addEventListener（参数1，参数2，参数3）
参数1 :事件名称（例如点击事件，‘click’）
参数2：事件执行函数
参数3（不写时默认false）：false（默认值，表示事件冒泡阶段绑定事件）
	  				    true（表示事件捕获阶段绑定事件）

四、 event.target

event.target 是指触发事件的元素，常用的属性有：

event.target.nodeName  　　 //获取触发事件元素标签名（注意获取到的是标签名的大写）

event.target.id　　　　　　　//获取触发事件元素的id

event.target.className　　  //获取触发事件元素class类名

event.target.innerHTML　　  //获取触发事件元素的内容

五、实现函数

事件委托就是每个人都要做一遍的事，统一委托给一个人去做；如下面三个button本来都要绑定click事件才能实现点击弹出button按钮中的文字，但是现在统一委托给父元素div，然后通过e.target去实现具体操作

<div id="bnt">
	<button id="bnt1">hello button1</button>
	<button id="bnt2">hello button2</button>
	<button id="bnt3">hello button3</button>
</div>

function eventDelegation(){
	let bnt = document.getElementById('bnt');
	//在div上添加点击事件	 
	bnt.addEventListener("click",(e)=>{				
		// if(e.target.nodeName == 'BUTTON'){
		// 	alert(e.target.innerHTML)
		// }
		
		var bntID = e.target.id;			
		switch( bntID ){
			case 'bnt1': alert(e.target.innerHTML);break;
			case 'bnt2': alert(e.target.innerHTML);break;
			case 'bnt3': alert(e.target.innerHTML);break;
		}											
	})
}

完结。。。。。