DOM 事件委托

事件委托（Event delegation），也被称为事件托管或事件代理，JS高程上是这样讲的：

对“事件处理程序过多”的问题的解决方案就是事件委托。事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

还是看不懂？那我们可以通过取快递的例子通俗易懂的领会一下什么是事件委托：

员工的快递寄到公司，有两种签收方法，一是所有取快递的人都在公司门口等；二是委托给前台代收，现实中我们一般都会采用委托的方案，前台收到快递后就会判断收件人是谁，然后按照收件人的要求去签收，甚至帮他代付。这样的好处就是不管公司来了多少新员工，前台都会在收到快递后去核实并签收。

这里还有2层意思：

第一，委托前台可以代收快递，即程序中现有的 DOM 节点是有事件的；
第二，新员工也可以请前台代收快递，即程序中新增的 DOM 节点也是有事件的。

我们为什么要用事件委托呢？

一般来说，DOM 需要有事件处理程序，我们会直接给它设事件处理程序，那么如果有很多 DOM 需要添加事件处理，比如我们要给100个按钮添加相同的点击事件，我们用 for 循环的方法，来遍历所有的按钮，然后给它们添加事件，这样做就会存在一些影响：

在 JS 中，添加到页面上的事件处理程序数量会直接关系到页面的整体运行性能，由于需要不断的与 DOM 节点交互，访问 DOM 的次数越多，引起浏览器重绘与重排的次数也就越多，这会延长整个页面的交互就绪事件，也是为什么性能优化的主要思想之一就是减少 DOM 操作的原因。

用事件委托，可以将所有的操作放到 JS 程序里，与 DOM 的操作只需交互一次，这样大大减少了与 DOM 交互的次数，提高了性能。

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，性能也就越差，比如上面100个按钮，就要占用100个内存空间，如果用事件委托，我们就可以只对父级（如果只有一个父集）这一个对象进行操作，我们就只需一个内存空间就够了，性能自然会更好。

事件委托的原理：

事件委托是利用事件的冒泡来实现的，那么何为事件冒泡？事件冒泡就是从最深的节点开始，然后逐步向上传播事件，例如，页面上有个节点数，爷爷>爸爸>儿子>孙子，给孙子添加一个点击事件，那么这个事件就会一层一层往外执行，执行顺序孙子>儿子>爸爸>爷爷，有这样一个机制，那么我们给爷爷添加点击事件，里面的爸爸、儿子、孙子做点击事件的时候，都会冒泡到最外层的爷爷上，所以都会触发，这就是事件委托，委托它们的父级代为执行事件。

总结

事件委托的好处

• 简化初始化并节省内存：无需添加许多处理程序。
• 更少的代码：添加或移除元素时，无需添加/移除处理程序。
• DOM 修改 ：我们可以使用 innerHTML 等，来批量添加/移除元素。

事件委托的局限

• 首先，事件必须冒泡。而有些事件不会冒泡。此外，低级别的处理程序不应该使用 event.stopPropagation()。
• 其次，委托可能会增加 CPU 负载，因为容器级别的处理程序会对容器中任意位置的事件做出反应，而不管我们是否对该事件感兴趣。但是，通常负载可以忽略不计，所以我们不考虑它。

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

适合用事件委托的事件

click，mousedown，mouseup，keydown，keyup，keypress

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

不适合用事件委托的事件

mousemove，每次都要计算它的位置，非常不好把控，还有 focus，blur 之类的，本身就没用冒泡的特性，自然就不能用事件委托了。