从零开始学前端 - 35. JS事件委托详解

作者: 她不美却常驻我心
微信公众号：老王的前端分享
每篇文章纯属个人经验观点，如有错误疏漏欢迎指正。转载请附带作者信息及出处。

一、什么是事件委托？

  事件委托又叫事件代理，即子级元素，委托父级元素代为执行事件。主要是利用事件冒泡的原理，指定一个事件处理程序来处理某一类型的所有事件。例如说点击 button 后会触发 click 事件，这个事件会一直冒泡到根元素 document 上，那么我们就可以直接为 document 绑定一个 click 的事件处理程序用于处理页面内的所有点击事件，而不必为每一个元素分别绑定 click。

  网上有一个非常恰当的例子：假设公司有好多个员工都需要收快递，他们可以选择各自分别去取快递，也可以选择委托前台来帮忙签收。事实上我们都会选择让前台来帮忙签收，而不是由员工各自签收，因为让每个员工分别去签收快递是一件非常没有效率的事情；而让前台来签收的话，只需要一个人就可以签收所有的快递，即使对签收有特殊的需求的话，也只需要提前和前台打声招呼，让她在签收的时候注意一下即可。由于指定签收快递的人是公司的前台，所以即使是新员工的快递，前台也会进行签收。

  我们在将前台签收快递的事例转化到程序中：

• 委托前台来帮忙签收快递，相当于子元素将事件处理程序委托给父级元素，由父级元素统一处理，每个子元素无须绑定事件处理程序；
• 由前台来签收所有快递比各自签收要有效率，在页面中相当于只添加一个事件处理程序，所需用到的 DOM 引用更少，所花的时间也更少，节省了占用的内存空间，从而提高了整体的性能；
• 特殊的签收方式相当于父级元素针对不同的元素进行判断，执行不同的处理程序；
• 新员工的快递前台也会签收，这代表着即使是动态添加到页面中的元素，也是有事件的；
• 如果公司有一天禁止员工签收快递的话，只需要禁止前台一人即可，这表明页面里需要跟踪的事件处理程序很少，移除事件时会很容易。

二、事件委托的原理

  事件委托是利用事件的冒泡原理来实现的，那什么是事件冒泡呢？事件冒泡是 IE 提出的的事件流顺序：从事件开始时的元素本身开始，依次向父节点传播，如果父节点绑定了相应的处理函数，则会依次触发。

  假设页面中只存在一个元素 button ，那么当 button 被点击后，事件冒泡的执行顺序如下图所示：

  按照上方图例所示，如果我们在最外层的 document 元素上绑定点击事件处理程序，那么里面的 button,body,html 元素在被点击时，都会冒泡到 document 元素上，从而执行绑定在 document 元素上的事件处理程序，这就是事件委托。

三、事件委托的实现

  假设页面中存在一个年份的聚类列表，我们需要将用户点击的年份传递给后台，用以对数据进行筛选：

<ul>
	<li>2020</li>
	<li>2019</li>
	<li>2018</li>
	<li>2017</li>
</ul>

  首先我们按照常规的方式来实现这个需求：

var aLi = document.querySelectorAll