一、什么是事件委托？
把事情托付给比人
说白了就是给父元素注册事件，把处理的代码在父元素的事件中去执行。
事件委托是事件冒泡本身的特性，有利有弊。
事件委托也称为事件代理，在jQuery里称为事件委派。
二、事件委托的作用
节约工作量，提高程序性能。
比如一个ul下面有很多个li，每次点击一个li弹窗一个对话框，如果要是给每个li添加注册事件，太繁琐，而且需要多次访问DOM，就会延长整个网页的交互的中的时间。
如果用事件委托就比较方便，只需要操作一次DOM，这样就可以大大的提高程序的性能。
三、事件委托该如何使用
直接给父元素添加注册时间，利用事件冒泡，当子元素触发事件后，会冒泡到父元素，然后去控制相应的子元素。
该如何去控制子元素？只要使用e.target ，就可以获取到事件源（点击某个子元素，就可以对这个元素进行操作）
例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>事件委托</title> <style> ul{ margin: 0; padding: 0; list-style-type: none; width: 100%; } ul li{ width: 100px; height: 20px; background-color: royalblue; margin: 2px; } </style> </head> <body> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <script> var ul = document.querySelector('ul'); ul.onclick = function(e){ e.target.style.backgroundColor = 'yellow'; //事件委托 } </script> </body> </html>
效果如下图：
