原理
如果页面上有 10 个 li 元素，点击谁，谁就变色。我们之前学习过使用循环语句给它们添加监听，但是这
样做会使系统的内存开销非常大，网页的性能会急剧下降，因为我们创建了非常多的事件监听。
那应该怎么办呢？事件委托就是一非常好的解决办法。
事件委托指的是将事件委托给父元素或者组件元素，父元素或者祖先元素利用事件冒泡机制会响应事件，通
过 event.target 来判断是谁触发了事件。
例如：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>事件委托</title>
<style type="text/css">
ul{
list-style: none;
}
li{
float: left;
width: 60px;
height: 60px;
background-color: #ccc;
margin-right: 10px;
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script type="text/javascript">
var ul = document.querySelector("ul");
//事件委托
ul.onclick = function(event){
event.target.style.backgroundColor = "red";
}
</script>
</body>
</html>
代码非常的简单，我们只监听了 ul 对象的点击事件，点击之后让 event.target 元素即事件的来源（就是
li 元素）的背景颜色设置为红色。这就完成了点击谁谁变色的效果
这就是事件委托，非常的简单，是利用事件冒泡和 event.target 属性实现的。
什么时候需要事件委托
需要使用事件委托委托的场景：
页面上有大量相似元素需要添加监听
页面上有动态元素需要添加监听
页面上有大量相似元素需要添加监听”可以理解，但是“页面上有动态元素需要添加监听”是什么意思呢？
我们在上一章学习过创建元素的方法，新创建的元素是没有任何事件监听的。我们总不能创建一个元素，就
给它添加一个监听吧？
所以，当页面上有动态元素需要添加监听的时候，要想起事件委托。比如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;
}
li{
float: left;
width: 80px;
height:80px;
margin-right: 10px;
background-color: orange;
}
</style>
</head>
<body>
<button id="btn">添加 li 元素</button>
<ul id="myList"></ul>
<script type="text/javascript">
var myList = document.getElementById("myList");
var btn = document.getElementById("btn");
//事件委托
myList.onclick = function(event){
event.target.style.background = "red";
}
//点击按钮创建新 li 上树
btn.onclick = function(){
var nLi = document.createElement("li");
myList.appendChild(nLi);
}
</script>
</body>
</html>
在页面上我们放了一个按钮，点击按钮之后将会创建一个列表项添加到列表中。添加到列表中的元素会天生
拥有事件，因为我们使用了事件委托。
