当前位置：Gxlcms > JavaScript > jquery事件委托如何使用

jquery事件委托如何使用

时间：2021-07-01 10:21:17 帮助过：4人阅读

这篇文章主要介绍了关于jquery事件委托如何使用，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

一、总结

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

1、事件委托是什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

html代码+append方法

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

二、jquery事件委托怎么使用

1、相关知识

事件委托

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

2、代码

  1. <!DOCTYPE html>
  2. <html>
  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.       //使用事件委托，只在table上绑定一次事件
  91.       //可以动态绑定事件
  92.       $('table').on('click','td',function(){
  93.             //$(this).css('background','orange')
  94.             alert('click_td')
  95.       })
  96.     })
  97. </script>
  98. </body>
  99. </html>

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

js将任意元素移动到指定位置

Node.js使用superagent模拟GET/POST的请求

以上就是jquery事件委托如何使用的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！