什么是事件代理？
事件代理：又称事件委托，就是把原本需要绑定的事件委托给父元素，让付元素负责事件监听。
其原理是DOM元素的事件冒泡。
事件流图片
事件流：页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流；
捕获阶段：先由文档的根节点document往事件触发对象从外向内捕获事件对象；
目标阶段：到大目标事件位置（事发地），触发事件；
冒泡阶段：从目标事件位置往文档的根节点方向回溯，从内向外冒泡事件对象；
例子：通过监听ul来监听li的点击
//html代码 - 1
- 2
- 3
- 4
//css代码.Li{ background-color: aqua;}//js代码// 获取类名为.Li的第一个元素let Li = document.querySelector('.Li');// 获取匹配到的第一个元素let Ul = document.querySelector('ul');// 对获取到的Ul元素设置点击事件Ul.onclick = function(e){ Li.className = ''; //声明一个变量并赋值为当前点击的Li let This = e.target; //设置当前点击的li类名为Li This.className = 'Li'; // 将This赋给Li(为了开始时的设置其类名为''~清除css样式) Li = This;}
这样就可以实现一个简单的事件委托
事件委托的优点：
（1）减少事件数量，提高性能；
原本要监听四个li的，现在只需要监听一个ul了
（2）新增加的元素仍然可以触发事件；
（3）避免了在低版本中删除了元素而没有移除事件造成的内存溢出；
内存外泄：指的是由于疏忽或错误造成程序未能释放已经不再使用的内存，严重时无用的内存还会增加，从而导致系统的卡顿甚至崩溃
缺点：
事件代理没有用好可能会造成不该触发的事件被绑定事件