JavaScript 事件委托是指将事件注册在父元素上之后，其子元素都具备了该事件的功能。通过addEventListener 来实现事件委托。
减少事件注册，节省内存。假设一个 ul 元素下面有 n 个 li 子元素，需给每一个 li 添加点击事件。如果不用事件委托，有几个 li 元素，就需要注册几个事件。但是使用事件委托，就可以将点击事件委托在其父元素 ul 上。那么不管其下面有几个子元素，都可以拥有点击事件。
子元素动态绑定事件。在很多应用场景下，我们会根据用户操作或者调取的接口数据来动态增减子元素。如果不使用事件委托，对动态子元素的绑定和解绑事件处理会比较麻烦。而事件委托可以灵活地实现动态绑定事件，只要给父元素注册了事件，其子元素内部不管怎么动态增加，都具备了该事件的功能，无需考虑绑定和解绑的问题。
通过 addEventListener 来实现事件委托。 （1）兼容性 addEventListener 主要用于所有主流浏览器，除了IE8（含）以下版本。 （2）用法 element.addEventListener(event, function, useCapture)；
参数说明类型是否必须event指定事件名。 不加’on’，如clickString是function指定要事件触发时执行的函数Function是useCapture指定事件是否在捕获或冒泡阶段执行Boolean否（3）示例
事件委托
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> </head> <body> <ul id="list"> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </body> <script> var list = document.getElementById("list"); list.addEventListener('click',(e)=>{ console.log(e.target) }) </script> </html>以上案例，通过将事件委托给父元素，其子元素也都具备了点击事件。如果不使用事件委托，则需要将点击事件添加到每个 li 元素。
使用 addEventListener 事件与直接添加事件的区别 直接添加事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> </head> <body> <ul id="list"> <li id="1">item 1</li> </ul> </body> <script> var id1= document.getElementById("1"); id1.onclick = ()=>{ console.log('事件1') }; id1.onclick = ()=>{ console.log('事件2') }; </script> </html>输出结果： 通过结果可以看出，直接通过 onclick 的形式绑定事件，在绑定多个事件时，最后一次事件会覆盖前面的事件。这样如果我们对同一类型的事件有多种事件处理时就不使用。
通过 addEventListener 方式添加事件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> </head> <body> <ul id="list"> <li id="1">item 1</li> </ul> </body> <script> var id1= document.getElementById("1"); id1.addEventListener('click',()=>{ console.log('事件1') }); id1.addEventListener('click',()=>{ console.log('事件2') }); </script> </html>输出结果：
通过结果可以看出，绑定的两次事件都执行了。
事件冒泡 事件冒泡是事件由下至上的执行。就像一个泡泡，会慢慢地向上延伸。即从当前目标元素开始执行，再执行父元素事件，上层元素事件，直到 body 事件, document 事件, window 事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> </head> <body> <ul id="list"> <li id="1">item 1</li> </ul> </body> <script> var list = document.getElementById("list"); var id1= document.getElementById("1"); id1.addEventListener('click',(e)=>{ console.log('id1',e.target) }); list.addEventListener('click',(e)=>{ console.log("list",e.target) }); </script> </html>addEventListener 的第三个参数默认为false，可以不写。此时是事件冒泡。以上案例中，先输出 id1，再输出 list。
事件捕获 事件捕获是事件由上至下的执行。即先执行顶层对象 window 事件，再执行 document 事件， body 事件直到当前目标事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title></title> </head> <body> <ul id="list"> <li id="1">item 1</li> </ul> </body> <script> var list = document.getElementById("list"); var id1= document.getElementById("1"); id1.addEventListener('click',(e)=>{ console.log('id1',e.target) }); list.addEventListener('click',(e)=>{ console.log("list",e.target) },true); </script> </html>在事件冒泡的案例中，如果想要先打印出父元素的事件。可以使用事件捕获，只需要在父元素事件上添加第三个参数为 true，就表示事件捕获。
