在上学期间，我们宿舍的人经常会点外卖到宿舍里吃，外卖小哥会把外卖放到宿舍楼门口的桌子上。通常我们会自己一个人一个人这样去拿，但后来，我们发现把拿餐的事情委托给宿舍长让她去拿，然后根据订单信息分发给每个人，这样会更省事一些。
事件委托（Event Delegation）也是如此。把原本绑定在子元素上的事件委托给父元素，父元素监听子元素的冒泡事件，就可以方便的触发子元素的事件了。
举个栗子。
<ul id='father'>
<li id='li1'>1</li>
<li id='li2'>2</li>
<li id='li3'>3</li>
</ul>
需要在点击到相应的项目时，把它删除掉，如果不用事件委托的话，应该一条条的绑定它(用for循环也可以)。
let li1 = document.getElementById('li1')
let li2 = document.getElementById('li2')
let li3 = document.getElementById('li3')
li1.addEventListener('click',(e)=>{
li1.remove()
})
li2.addEventListener('click',(e)=>{
li2.remove()
})
li3.addEventListener('click',(e)=>{
li3.remove()
})
这样做倒是能达到我们的目标，但是有缺点，太占内存了，万一有用户的电脑配置极差把别人卡死了怎么办？，而且为每一个元素都添加代码去实现相同的功能，这样的写法不够酷，太机械了。
用事件委托就可以完美解决上述问题，来看一下事件委托是怎么做的吧。
let father = document.getElementById('father')
father.addEventListener('click',(e)=>{
let target = e.target
target.remove()
},true)
功能和之前一样，但性能更好了（节省了内存那位电脑不好的用户你可以上我们的网站啦），而且如果有增加或删除li元素的需要的话，也完全不用增加新的代码或者是解绑事件。
