1.事件委托的原理
事件委托利用事件冒泡（从最深的节点开始，然后逐步向上传播事件）只在他们的父元素上指定一个事件处理程序，就可以管理某一类型的的所有事件。
2.事件委托的实现
事件源：Event对象提供了一个属性叫target，可以返回事件的目标节点。
3.为什么要用事件委托
dom需要有事件处理程序，我们都会直接给它设事件处理，那如果是很多的dom需要添加事件处理？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
- 操作DOM次数过多，造成浏览器的重排和重绘就越多；
- 每个事件都是一个对象，事件处理程序越多，占用的内存越多，影响前端性能；
4.事件委托优点
- 减少DOM操作的，减少浏览器的重绘（repaint）和重排（reflow），从而提高性能；
- 减少内存空间的占用率，因为每一个函数都是一个对象，对象越多，内存占有率就越大，自然性能就越差，使用事件委托，只需要在其父元素中定义一个事件就可以。
- 适合事件委托的事件有：click，mousedown，mouseup，keydown，keyup，keypress
- 可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定。
5.示例
<div id="div1">
<input type="button" id="add" value="添加" />
<input type="button" id="remove" value="删除" />
<input type="button" id="move" value="移动" />
<input type="button" id="select" value="选择" />
</div>
复制代码
target是获得了当前节点位置，但不知道具体节点名称，所以使用tagName来来获取标签名。当input被点击时，由于冒泡原理，事件就会冒泡到div上，因为div上有点击事件，所以事件就会触发。
div1.addEventListener('click', (e) => {
const t = e.target;
if (t.tagName.toLowerCase() === 'input') {
switch (t.id) {
case 'add':
alert('添加');
break;
case 'remove':
alert('删除');
break;
case 'move':
alert('移动');
break;
case 'select':
alert('选择');
break;
}
}
})
