一、什么是事件委托？
把事情托付给比人
说白了就是给父元素注册事件，把处理的代码在父元素的事件中去执行。
事件委托是事件冒泡本身的特性，有利有弊。
事件委托也称为事件代理，在jQuery里称为事件委派。
二、事件委托的作用
节约工作量，提高程序性能。
比如一个ul下面有很多个li，每次点击一个li弹窗一个对话框，如果要是给每个li添加注册事件，太繁琐，而且需要多次访问DOM，就会延长整个网页的交互的中的时间。
如果用事件委托就比较方便，只需要操作一次DOM，这样就可以大大的提高程序的性能。
三、事件委托该如何使用
直接给父元素添加注册时间，利用事件冒泡，当子元素触发事件后，会冒泡到父元素，然后去控制相应的子元素。
该如何去控制子元素？只要使用e.target ，就可以获取到事件源（点击某个子元素，就可以对这个元素进行操作）
例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件委托</title>
<style>
ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 100%;
}
ul li{
width: 100px;
height: 20px;
background-color: royalblue;
margin: 2px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.onclick = function(e){
e.target.style.backgroundColor = 'yellow'; //事件委托
}
</script>
</body>
</html>
效果如下图：
