概念
把一个元素响应事件（click、keydown......）的函数委托到另一个元素。一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数。
原理
事件委托的原理是DOM元素的事件冒泡
事件冒泡
一个事件触发后，会在子元素和父元素之间传播，传播分成三个阶段：捕获阶段，目标阶段，冒泡阶段
- 捕获阶段：从window对象传导到目标节点，捕获阶段不回响应任何事件，
- 目标阶段：在目标节点上触发
- 冒泡阶段：从目标节点传导回window对象
事件委托的优点
- 可以大量节省内存占用，减少事件注册
- 可以实现当新增子对象时无需再次对其绑定（动态绑定事件）
基本实现
<body id="body">
<button>选择文件</button>
<button>保存文件</button>
<button>弹出消息</button>
<button>发送信息给主进程</button>
<button>弹出菜单</button>
<button>发送请求</button>
<script>
// 事件委托 给button的父元素绑定click事件
var body = document.getElementById('body')
console.log(body)
body.addEventListener('click', function(e){
// console.log(e.target.tagName)
if(e.target.tagName == 'BUTTON'){
e.target.remove()
}
})
</script>
</body>
// 不使用事件委托，每个button元素都需要绑定click事件
var btn = document.getElementsByTagName('button')
console.log(btn)
var Btn = Array.prototype.slice.call(btn)
console.log(Btn)
Btn.forEach(element => {
element.onclick = function(){
console.log(element)
element.remove()
}
});
事件委托注意事项
使用“事件委托”时，并不是说把事件委托给的元素越靠近顶层就越好。事件冒泡的过程也需要耗时，越靠近顶层，事件的”事件传播链”越长，也就越耗时。如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致性能损失。
