冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。、
看了之后可能你还不理解，那么请看下面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="parentID" onclick="parentfunc()"> <div id="childID" onclick="childfunc()">你好</div> </div> <script> function parentfunc() { alert("父级事件触发了！"); } function childfunc() { alert("子级事件触发了！"); } </script> </body> </html>本来在上面的代码中，点击你好只想触发childID元素的onclick事件，然而parentID元素也同时触发了，这就是事件冒泡。
event.stopPropagation()
<script> function parentfunc() { alert("父级事件触发了！"); } function childfunc() { alert("子级事件触发了！"); event.stopPropagation(); } </script>1、意义
在JavaScript中，添加到页面上的事件处理程序的数量，将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因。
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率越大，100个li就要占用100个内存空间。如果用事件委托，就会将所有的操作放到js程序里面，就只对它的父级(如果只有一个父级)这一个对象进行操作，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能。
2、原理
事件委托是利用事件的冒泡原理来实现的，使用案例请见下面代码。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <script> let ul = document.querySelector('#ul') ul.addEventListener('click', (event) => { console.log(event.target); }) </script> </body> </html>3、优点
节省内存使页面性能更好