事件委托

什么是事件委托？

为什么会有事件委托

因为事件绑定性能不好

什么是事件绑定？

对Dom元素绑定事件处理函数，事件触发的时候，调用这个函数
onclick onmouserover/out/dow ....

<input type="button" value="click me" onclick="hello()">

监听方式：
<input type="button" value="click me" id="btn">
<script>
document.getElementById("btn").onclick = function(){
	alert("hello world!");
}
</script>

• 事件监听优势
  可以绑定多个事件，而常规的事件绑定只执行最后一个事件

<input type="button" value="click me" id="btn3">
<script>
var btn3 = document.getElementById("btn3");
btn3.onclick = function(){
	alert("hello 1"); //不执行
}
btn3.onclick = function(){
	alert("hello 2"); //执行
}
</script>



btn4.addEventListener("click",hello1); // 执行
btn4.addEventListener("click",hello2); // 执行

• 事件委托

利用事件冒泡的原理，把事件加到父元素或者祖先元素上，触发执行效果

• 为什么有了事件绑定和监听还要事件委托

通过事件委托，减少dom的访问和操作，提高性能

举个?：

<ul id="list">
  <li id="item1" >item1</li>
  <li id="item2" >item2</li>
  <li id="item3" >item3</li>
</ul>

var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

不用事件委托的方式：

item1.onclick = function(){
	alert("one");
}
item2.onclick = function(){
	alert("two");
}
item3.onclick = function(){
	alert("three");
}

事件委托方式:

document.addEventListener("click",function(event){
	var target = event.target;
	if(target == item1){
		alert("hello item1");
	}else if(target == item2){
		alert("hello item2");
	}else if(target == item3){
		alert("hello item3");
	}
})

有上面可知，事件委托可以减少Dom的操作，和减少事件的绑定，由此提升性能

减少Dom操作为什么会提高性能(js引擎和，渲染引擎独立访问需要耗能)

• 减少事件绑定提高性能原因

item1.onclick = function(){
	alert("one");
}

普通事件绑定，绑定一个事件，就要调用一个函数
函数是对象，对象要消耗内存，，对象越多，内存消耗越大，自然性能就差了

• paas项目中运用,规定不能用原生的onclick事件，要用Onclick

Onclike在组件卸载的时候回注销绑定的事件
原生的事件不会卸载事件导致内存泄漏，绑定的事件函数是对象，对象就要消耗内存