什么是事件代理？

事件代理，俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素

我们知道，事件流的都会经过三个阶段：捕获阶段 -> 目标阶段 -> 冒泡阶段，而事件委托就是在冒泡阶段完成

事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，而不是目标元素

当事件响应到目标元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

下面举个例子：

比如一个宿舍的同学同时快递到了，一种笨方法就是他们一个个去领取

较优方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个同学

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM元素，而出去统一领取快递的宿舍长就是代理的元素

所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个

事件代理（ Event Delegation ），⼜称之为事件委托。是JavaScript 中常⽤绑定事 件的常⽤技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给⽗元素，让⽗元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使⽤事件代理的好处是可以提⾼性能，可以⼤量节省内存占⽤，减少事件注册，⽐如在 table 上代理所有 td 的 click 事件就⾮常棒，可以实现当新增⼦对象时⽆需再次对其绑定。

事件代理又叫事件委托,是在网页设计中的一种设计思想,即把一个或者一组元素(目标元素)的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素。

事件代理，俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素。 事件代理又叫事件委托，是在网页设计中的一种设计思想，即把一个或者一组元素（目标元素）的事件绑定到父级或者祖先级元素上。真正绑定事件的是外层元素，⽽不是⽬标元素。 当事件响应到⽬标元素上时，会通过事件冒泡机制从⽽触发它的外层元素的绑定事件上，然后在外层元素上去执⾏函数。 举个例子——疫情封寝的时候，一个寝室大家都要买饭，如果每个人都出去就很麻烦，这时就委托一个志愿者帮忙给寝室每个人带饭，然后把饭分给每个人，这个就是事件代理。

• 事件代理：通俗来说就是将元素的事件委托给它的父级或者更外级元素处理
• 原理：利用事件冒泡机制实现的
• 优点：只需要将同类元素的事件委托给父级或者更外级的元素，不需要给所有元素都绑定事件，减少内存空间占用，提升性能; 动态新增的元素无需重新绑定事件