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>
给动态元素添加事件
事件只绑定一次，效率高