这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战
事件委托是什么？
通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素
有事件冒泡的存在，才有能说去使用事件委托
这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。
为什么要用事件委托
一个很好的例子是一系列列表项，如果你想让每个列表项被点击时弹出一条信息，您可以将click单击事件监听器设置在父元素<ul>上，这样事件就会从列表项冒泡到其父元素<ul>上。
假设我们有一个UL带有多个子元素的父元素：
<ul id="parent-list">
<li id="post-1">Item 1</li>
<li id="post-2">Item 2</li>
<li id=">Item 3</li
<li id="post-4">Item 4</li>
<li id="post-5">Item 5</li>
<li id="post-6"Item 6</li>
</ul>
比如上述的例子中列表项就几个，我们给每个列表项都绑定了事件；
在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；
如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；
所以使用事件在动态绑定事件的情况下是可以减少很多重复工作的。
怎么去使用这个事件委托
document.getElementById("parent-list").addEventListener("click", function(e) {<font></font>
if(e.target && e.target.nodeName == "LI") {<font>>
console.log("List item ", e.target.id.replace("post-", ""), " was clicked!");
}
});
在上述代码中， target 元素则是在 #parent-list 元素之下具体被点击的元素，然后通过判断 target 的一些属性（比如：nodeName，id 等等）可以更精确地匹配到某一类 #parent-list li 元素之上；
之后大家写代码可以多想想，对于性能优化，事件委托可不可以帮到你，比较常用的就是点击事件，对于其他事件，可能有一些还不太适用，比如：mousemove、mouseout 这样的事件，虽然有事件冒泡，但是只能不断通过位置去计算定位，对性能消耗高；对于focus、blur之类的事件本身没有事件冒泡机制，所以就无法去使用事件委托了。
