js进阶---12-12、jquery事件委托怎么使用

一、总结

一句话总结：通过on方法（事件委托），给要绑定事件的元素的祖先绑定事件，从而达到效果。

1、事件委托是什么？

通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。

 91       //使用事件委托，只在table上绑定一次事件
 92       //可以动态绑定事件
 93       $('table').on('click','td',function(){
 94             //$(this).css('background','orange')
 95             alert('click_td')
 96       })

2、事件委托的优势是什么？

给动态元素添加事件
事件只绑定一次，效率高（对于同类大量元素需要绑定，效率非常高，比如一个表格2500td，要给每个td绑定事件）

 91       //使用事件委托，只在table上绑定一次事件
 92       //可以动态绑定事件
 93       $('table').on('click','td',function(){
 94             //$(this).css('background','orange')
 95             alert('click_td')
 96       })

3、事件委托的监听对象是谁（事件委托的对象是谁）？

要执行事件他祖先，比如要给大量td绑定事件，事件委托的对象就是它爷爷，也就是table表

 91       //使用事件委托，只在table上绑定一次事件
 92       //可以动态绑定事件
 93       $('table').on('click','td',function(){
 94             //$(this).css('background','orange')
 95             alert('click_td')
 96       })

4、代码添加的元素和动态添加的元素的区别？

代码生成元素的添加事件的代码要在代码生成之后，这样他是可以绑定事件的

 73       //如果不是动态创建的，可以直接绑定事件
 74       $('<div></div>').appendTo($('body'))
 75       $('<div></div>').appendTo($('body'))
 76       $('<div></div>').appendTo($('body'))
 77       $('div').on('click',function(){
 78             $(this).css('background','orange')
 79        })

5、事件委托的使用场景是什么？

一个表格里面有很多td，要给td绑定事件，如果使用给每个td绑定事件的方法，效率非常低，并且容易出错，使用事件委托的话就特别方便了，一步到位。

 91       //使用事件委托，只在table上绑定一次事件
 92       //可以动态绑定事件
 93       $('table').on('click','td',function(){
 94             //$(this).css('background','orange')
 95             alert('click_td')
 96       })

6、如何动态给表格添加行列？

html代码+append方法

 87       $('#btn1').click(function(){
 88           $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
 89       })

二、jquery事件委托怎么使用

1、相关知识

事件委托

通过事件冒泡，让子元素绑定的事件冒泡到父元素(或祖先元素)上，然后再进行处理。

2、代码

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <style>
  4 </style>
  5 <head>
  6     <meta charset="UTF-8">
  7     <title>演示文档</title>
  8     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
  9     <style type="text/css">
 10         input{width: 100px;height: 30px;}
 11         div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
 12         td{width: 50px;height: 20px;background: #ccc}
 13       </style>
 14 </style>
 15 </head>
 16 <body>
 17 <h3>jQuery事件对象</h3>
 18 <input id="btn1" type="button" value="事件绑定"><br>
 19 <div></div>
 20 <table>
 21     <tr>
 22         <td></td>
 23         <td></td>
 24         <td></td>
 25         <td></td>
 26         <td></td>
 27     </tr>
 28     <tr>
 29         <td></td>
 30         <td></td>
 31         <td></td>
 32         <td></td>
 33         <td></td>
 34     </tr>
 35     <tr>
 36         <td></td>
 37         <td></td>
 38         <td></td>
 39         <td></td>
 40         <td></td>
 41     </tr>
 42     <tr>
 43         <td></td>
 44         <td></td>
 45         <td></td>
 46         <td></td>
 47         <td></td>
 48     </tr>
 49     <tr>
 50         <td></td>
 51         <td></td>
 52         <td></td>
 53         <td></td>
 54         <td></td>
 55     </tr>
 56 </table>
 57 <script type="text/javascript">
 58     $(function(){
 59         /*
 60     //使用事件委托动态绑定事件
 61       $('#btn1').on('click',function(){
 62          $("<div></div>").appendTo($('body'))
 63       })
 64       // $('div').on('click',function(){
 65       //     $(this).css('background','orange')
 66       // })
 67       $(document).on('click','div',function(){
 68           $(this).css('background','orange')
 69       })
 70       //移出事件委托
 71       $(document).off('click','div')
 72       
 73       //如果不是动态创建的，可以直接绑定事件
 74       $('<div></div>').appendTo($('body'))
 75       $('<div></div>').appendTo($('body'))
 76       $('<div></div>').appendTo($('body'))
 77       $('div').on('click',function(){
 78             $(this).css('background','orange')
 79        })
 80       
 81       //每一个td绑定一个事件
 82       //不能动态的添加事件,效率低
 83       $('td').on('click',function(){
 84           alert('click_td')
 85       })
 86       */ 
 87       $('#btn1').click(function(){
 88           $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
 89       })
 90 
 91       //使用事件委托，只在table上绑定一次事件
 92       //可以动态绑定事件
 93       $('table').on('click','td',function(){
 94             //$(this).css('background','orange')
 95             alert('click_td')
 96       })
 97 
 98     })
 99 </script>
100 </body>
101 </html>

给动态元素添加事件
事件只绑定一次，效率高