JavaScript事件委托

事件委托

把一个元素相应事件(click、keydown…)的函数委托到另外一个元素

一般的来讲，会把一个或者一组元素委托到他的父层或更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。

例子：：：
比如一天中午大家去楼下买饭，一种方法就是他们都傻傻地一个个去买, 另一种方法就是马云不想去，就让马化腾帮忙带一下，然后张一鸣表示让马化腾也带一下，最后大家都没去，就马化腾自己去买饭了，然后回来再根据每个人的名字一一分发给大家。

在这里，买饭就是一个事件，每个人指的是需要响应事件的 DOM 元素，而出去统一去买饭的振哥就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

事件冒泡 前面提到 DOM 中事件委托的实现是利用事件冒泡的机制，那么事件冒泡是什么呢？

在 document.addEventListener 的时候我们可以设置事件模型：事件冒泡、事件捕获，一般来说都是用事件冒泡的模型；（事件委托跟事件冒泡正好相反，就是说从内到外）

捕获阶段：在事件冒泡的模型中，捕获阶段不会响应任何事件； 目标阶段：目标阶段就是指事件响应到触发事件的最底层元素上； 冒泡阶段：冒泡阶段就是事件的触发响应会从最底层目标一层层地向外到最外层（根节点），事件代理即是利用事件冒泡的机制把里层所需要响应的事件绑定到外层；

委托的优点

减少内存消耗

总结：

那什么样的事件可以用事件委托，什么样的事件不可以用呢？

适合用事件委托的事件：click，mousedown，mouseup，keydown，keyup，keypress。

值得注意的是，mouseover和mouseout虽然也有事件冒泡，但是处理它们的时候需要特别的注意，因为需要经常计算它们的位置，处理起来不太容易。

不适合的就有很多了，举个例子，mousemove，每次都要计算它的位置，非常不好把控，在不如说focus，blur之类的，本身就没用冒泡的特性，自然就不能用事件委托了。