#转载请留言联系
事件委托，也叫事件委派。是把目标事件的绑定委托到父级元素。
下面用两个示例来说明下什么是事件委派。
做一个列表，当点击列表的某一项时，该项的背景色变成蓝色，其余项保持底色。
传统的给事件绑定事件的做法是这样的：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js/jquery-1.12.4.min.js"></script> 7 <script> 8 $(function(){ 9 $('.list li').on('click',function(event){ 10 $(this).css({"background":"blue"}).siblings().css({"background":"white"}); 11 }) 12 }) 13 </script> 14 </head> 15 <body> 16 <ul class="list"> 17 <li>第一个标题</li> 18 <li>第二个标题</li> 19 <li>第三个标题</li> 20 <li>第四个标题</li> 21 <li>第五个标题</li> 22 </ul> 23 </body> 24 </html>
而事件委派的做法是这样的：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="js/jquery-1.12.4.min.js"></script> 7 <script> 8 $(function(){ 9 $('.list').on('click','li',function(event){ 10 $(this).css({"background":"blue"}).siblings().css({"background":"white"}); 11 }) 12 }) 13 </script> 14 </head> 15 <body> 16 <ul class="list"> 17 <li>第一个标题</li> 18 <li>第二个标题</li> 19 <li>第三个标题</li> 20 <li>第四个标题</li> 21 <li>第五个标题</li> 22 </ul> 23 </body> 24 </html>
这两种做法的差别就在第9行，可见，事件委派是把目标事件的绑定委托到父级元素。
总结：
传统的给目标对象添加事件的写法
$('#list li').on('click', function(){
$(this).css({'background':'orange'}).siblings().css({"background":"transparent"});
});
事件委托，把目标事件的绑定委托到父级元素
$("委托元素的选择器").on('事件类型','事件目标元素选择器', function(){
这里就是操作事件目标元素的代码了, this 指代的是目标元素
})
事件委托的好处：
1、原本需要给多个元素添加，现在只需要给一个元素添加，性能上比较好些。
2、对后续创建生成的元素可以直接操作，而on事件不可用。这时候一般用delegate，详细可以参考http://www.w3school.com.cn/jquery/event_delegate.asp