1. 事件委托定义
事件委托指的是不在事件的发生地（直接DOM）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到被触发的子元素事件，通过判断事件发生元素DOM的类型，来作出不同的响应。当子元素有很多时，使用事件委托可以避免对特定的每个节点添加事件监听器，事件监听被添加到它们的父元素上，事件监听函数这是可以从子元素上冒泡上来的事件，找到是哪个子元素事件。
2. 事件委托举例
最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。
第一步：给父元素绑定事件。给元素ul添加绑定事件，通过addEventListener为点击事件click添加绑定。
第二步：监听子元素的冒泡事件。这里默认是冒泡，点击子元素li会向上冒泡。
第三步：找到是哪个子元素的事件。 通过匿名回调函数的参数event用来接收事件对象，通过event.target或event.srcElement获取触发事件的目标。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <ul> <li>Test1</li> <li>Test2</li> <li>Test3</li> </ul> <script> var x=document.getElementsByTagName("ul")[0]; var handler=function(event) { var event = event.srcElement || event.target; alert(event.innerHTML); } x.addEventListener("click", handler, false); //x.attachEvent("onclick",handler); </script> </body> </html>
3. 使用事件委托的好处
事件委托技术可以避免对每个字元素添加事件监听器，减少操作DOM节点的次数，从而减少浏览器的重绘和重排，提高代码的性能。使用事件委托，只有父元素与DOM存在交互，其他的操作都是在JS虚拟内存中完成的，这样就大大提高了性能。