什么是事件委托：
事件委托——給父元素綁定事件，用來監聽子元素的冒泡事件，並找到是哪個子元素的事件。(不理解冒泡的可以去百度下)
定義：
利用事件冒泡處理動態元素事件綁定的方法，專業術語叫事件委托。
使用事件委托技術可以避免對特定的每個節點添加事件監聽器，相反，事件監聽器是被添加到它們的父元素上。事件監聽器會分析從子元素冒泡上來的事件，找到是哪個子元素的事件。
事件委托的好處：
事件委托技術可以避免對每個字元素添加事件監聽器，減少操作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>