事件委托
1.将事件绑定给已存在的父容器，让子元素进行触发 2.它利用了事件委托的原理，当子元素触发事件之后，会将事件冒泡给父容器 3.如果想对真正触发事件的元素进行处理，可以使用e.target获取当前真正触发事件的元素 4.如果子元素的操作不一样，需要通过判断，一般我们会对子元素添加一个标识，判断当前触发事件的元素是否有这个标识
例如：给所有的li添加一个样式。
1、获取页面上的button和ul标签
2、点击button按钮添加一个li
3、点击每一个li标签，li标签就会改变样式
注意点：如果一开始就获取页面上的所有li标签，这时会出现一个问题，就是点击每一个新增的li标签都不会改变样式。对于后面新增的元素，一般都是采用事件委托的方式，给它的父元素添加事件，利用事件冒泡的原理，点击每一个li冒泡给父元素触发事件。
HTML部分
<button>添加li元素</button>
<ul>
<li>我是第1个小li</li>
<li>我是第2个小li</li>
<li>我是第3个小li</li>
<li>我是第4个小li</li>
<li>我是第5个小li</li>
</ul>
JS部分
<script>
//获取ul元素
let ul = document.querySelector('ul')
//获取button元素
let btn = document.querySelector('button')
//为ul绑定一个事件委托，点击每一个li就会改变li的样式
ul.addEventListener('click', function(e) {
//使用事件对象判断是否点击这个子元素，如果点击的是li标签就会触发事件，如果点击的不是li标签就不会触发这个事件
if (e.target.localName == 'li') {
//把li的颜色改为红色
e.target.style.color = 'red'
}
})
//给button绑定单击事件，每一次点击就会增加一个li标签
btn.addEventListener('click', function() {
//创建一个li标签
let newLi = document.createElement('li')
//给li标签添加内容
newLi.innerHTML = '新的li结构'
//把li标签添加在ul所有子元素的最前面
ul.insertBefore(newLi, ul.children[0])
})
</script>
