事件委托（事件代理）

事件委托：（也叫事件代理）就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

直接看代码

HTML ：

<ul>
	<li class="item">item 1</li>
	<li class="item">item 2</li>
	<li class="item">item 3</li>
	<li class="item">item 4</li>
	<li class="item">item 5</li>
</ul>

1 循环加事件：

var arrLi = document.getElementsByClassName('item');
for(let i = 0 ; i < arrLi.length; i++) {
	arrLi[i].onclick = function() {
		this.style.backgroundColor = 'yellow';
	}
}

2 利用事件委托加事件：

var oUl = document.getElementsByTagName('ul')[0];
oUl.onclick = function(ev) {
	var ev = ev || event;
	var _this = ev.target || ev.srcElement;
	if(_this.tagName.toLowerCase() == 'li'){
		_this.style.backgroundColor = 'yellow';
	}
}

从上面代码可以看到，我们给 li 的父节点 ul 加了 click 事件，当点击 ul 中任意子节点的时候都会冒泡到 ul 上，此时我们再判断用户是点击了具体哪个节点，需要执行什么操作。这就是事件委托了。

事件委托的好处

1. 提高性能

   如上面的例子，用 for 循环给元素添加事件，每个 li 上面都有一个 click 事件，绑定的事件多，内存占用多；而用事件委托，只给 ul 绑定事件，由这个事件进行分发。

   另外，有些元素被删除时，绑定的事件没有被及时删除，造成内存泄漏，也会影响性能。

2. 动态添加的元素也会有事件

   比如页面上有个按钮，每点击一次都会添加一个 li ，用事件委托的话新添加的元素也有 click 事件。

哪些事件不适用

1. 没有冒泡特性的事件
   例如：focus / blur

2. 事件出发频繁
   例如：mousemove

哪些事件适用

click / mousedown / mouseup / keyup / keypress