事件委托

#转载请留言联系

事件委托，也叫事件委派。是把目标事件的绑定委托到父级元素。

下面用两个示例来说明下什么是事件委派。

做一个列表，当点击列表的某一项时，该项的背景色变成蓝色，其余项保持底色。

传统的给事件绑定事件的做法是这样的：

 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