jquery事件委托如何使用

这篇文章主要介绍了关于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       $('
').appendTo($('body')) 
 75       $('
').appendTo($('body')) 
 76       $('
').appendTo($('body')) 
 77       $('p').on('click',function(){ 
 78             $(this).css('background','orange') 
 79        })

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

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

GitHub Copilot

GitHub AI编程工具，实时编程建议

下载

 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           $('').appendTo('table') 
 89       })

二、jquery事件委托怎么使用

1、相关知识

事件委托

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

2、代码

    
    
    
    



jQuery事件对象

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

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

相关推荐：

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

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