什么是事件委托：
事件委托——给父元素绑定事件，用来监听子元素的冒泡事件，并找到是哪个子元素的事件。(不理解冒泡的可以去百度下)
定义：
利用事件冒泡处理动态元素事件绑定的方法，专业术语叫事件委托。
使用事件委托技术可以避免对特定的每个节点添加事件监听器，相反，事件监听器是被添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到是哪个子元素的事件。
事件委托的好处：
事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。
使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。
什么时候用事件委托：
当子元素有很多，需要对子元素的时间进行监听的时候
案例：
（1）原生JS实现事件委托效果
<!DOCTYPE html> <html> <head> <title>事件委托测试</title> </head> <body> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} div{display: block;width: 500px;padding: 200px 0 0 200px;} div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;} div ul li:nth-child(2n){background: #f00;} </style> <div> <ul> <li><a>测试1</a></li> <li><a>测试2</a></li> <li><a>测试3</a></li> <li><a>测试4</a></li> <li><a>测试5</a></li> <li><a>测试6</a></li> <li><a>测试7</a></li> <li><a>测试8</a></li> </ul> </div> <script type="text/javascript"> document.getElementsByTagName("ul")[0].addEventListener('click',function(e){ alert("点击的内容是："+e.target.innerHTML); }); </script> </body> </html>
事件委托三部曲：
第一步：给父元素绑定事件
给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定
第二步：监听子元素的冒泡事件
这里默认是冒泡，点击子元素li会向上冒泡
第三步：找到是哪个子元素的事件
通过匿名回调函数的参数e用来接收事件对象，通过target获取触发事件的目标
（2）JQ实现事件委托
<!DOCTYPE html> <html> <head> <title>事件委托测试</title> </head> <body> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script> <style type="text/css"> *{margin: 0;padding: 0;} a{text-decoration: none;} ul,li{list-style: none;} div{display: block;width: 500px;padding: 200px 0 0 200px;} div ul li{display: block;width: 100%;text-align: center;height: 35px;line-height: 35px;} div ul li:nth-child(2n){background: #f00;} </style> <div> <ul> <li><a>测试1</a></li> <li><a>测试2</a></li> <li><a>测试3</a></li> <li><a>测试4</a></li> <li><a>测试5</a></li> <li><a>测试6</a></li> <li><a>测试7</a></li> <li><a>测试8</a></li> </ul> </div> <script type="text/javascript"> $("ul").on('click',function(e){ alert("点击的内容是："+$(e.target).text()); }); </script> </body> </html>