问题
1.什么是事件委托
2.为什么要用到事件委托
3.事件委托的原理
4.事件委托的优点和缺点
详解
1.什么是事件委托
事件委托指的是子元素或子孙元素的事件绑定，交给其上级父元素或者祖先元素来绑定事件。这样就能避免把事件处理都添加到多个子级元素的身上。
2.为什么要用到事件委托 在web前端开发中,并不是程序注册的事件越多越好，反而事件注册的越多，就会越消耗程序的性能,会占用内存空间所以在事件注册较多的情况下，为了提高程序的性能，还能减少内存空间，应当适当减少事件的绑定。
传统的事件处理中，需要为每个元素注册事件。事件委托则是一种简单有效的技巧，通过它可以把事件注册到一个父级或父级以上的元素上，从而避免把事件注册到多个子级元素上。
3.事件委托的原理 事件委托的原理用到的就是 目标元素 与 事件冒泡，把事件绑定到父元素或者父元素之上的元素，然后等待着子元素的事件冒泡，并且在父元素或者父元素之上的元素绑定的事件中需要通过事件对象.targe才能知道当前点击的那个元素是哪个，再做出相应的处理。
- 1.给目标元素的父元素或者父元素之上的元素绑定事件。
- 2.在父元素或者父元素以上的元素注册的事件 通过事件对象.targe来获取当前点击的那个元素。
- 3.交给子元素去处理。
4.事件委托的优点和缺点
优点：
1.可以减少事件注册，节省内存。
2.不用在动态新增的元素上再绑定事件。
3.当要删除莫个父元素上的子元素时，不用移解绑上面的click事件。
4.简化了dom节点更新时，响应事件的更新。
5.在ul上代理所有的里的click事件。
缺点：
1.事件委托基于事件冒泡，对于那些不冒泡的事件是不支持事件委托的。
2.如果层级过多的话，在执行冒泡的过程中，可能会被中间的某一层给阻止掉。
3.如果把所有事件都让父元素或者祖先元素代理就可能会出现事件误判的情况，比如在document中代理了所有button的click事件，而另外的人在改用js代码时，可能不知情，会造成单击button触发了两个click事件。
4.理论上委托会导致浏览器频繁调用处理函数，虽然很可能不需要处理。所以建议就近委托比较好，比如在ul上代理li元素，而不是在document上代理li元素。
代码演示
<body>
<button class="btn">点我新增一行li元素</button>
<ul>
<li>我是项目经理1</li>
<li>我是项目经理2</li>
<li>我是项目经理3</li>
<li>我是项目经理4</li>
<li>我是项目经理5</li>
<li>我是项目经理6</li>
</ul>
<script>
//需求： 点击页面每一个li元素，自己的颜色修改为红色
//(1)点击按钮：新增li元素
document.querySelector('.btn').onclick = function () {
let newli = document.createElement('li')
// (2)设置内容
newli.innerText = '我是新来的'
// (3)添加到ul
document.querySelector('ul').appendChild(newli)
}
/* 事件委托：给父元素注册事件，委托给子元素注册 */
document.querySelector('ul').onclick = function (e) {
// this: 代表的是父元素ul
// console.log(this)
// e：事件对象
console.log(e)
// e.target 事件目标(点哪一个li触发的这个冒泡)
e.target.style.backgroundColor = 'pink'
}
</script>
</body>
点击之前和点击之后的效果比较
