0

0

jquery事件委托如何使用

不言

不言

发布时间:2018-07-09 17:59:06

|

1872人浏览过

|

来源于php中文网

原创

这篇文章主要介绍了关于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绑定事件的方法,效率非常低,并且容易出错,使用事件委托的话就特别方便了,一步到位。

Quinvio AI
Quinvio AI

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的请求

相关专题

更多
菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

Golang 性能分析与pprof调优实战
Golang 性能分析与pprof调优实战

本专题系统讲解 Golang 应用的性能分析与调优方法,重点覆盖 pprof 的使用方式,包括 CPU、内存、阻塞与 goroutine 分析,火焰图解读,常见性能瓶颈定位思路,以及在真实项目中进行针对性优化的实践技巧。通过案例讲解,帮助开发者掌握 用数据驱动的方式持续提升 Go 程序性能与稳定性。

9

2026.01.22

html编辑相关教程合集
html编辑相关教程合集

本专题整合了html编辑相关教程合集,阅读专题下面的文章了解更多详细内容。

56

2026.01.21

三角洲入口地址合集
三角洲入口地址合集

本专题整合了三角洲入口地址合集,阅读专题下面的文章了解更多详细内容。

51

2026.01.21

AO3中文版入口地址大全
AO3中文版入口地址大全

本专题整合了AO3中文版入口地址大全,阅读专题下面的的文章了解更多详细内容。

397

2026.01.21

妖精漫画入口地址合集
妖精漫画入口地址合集

本专题整合了妖精漫画入口地址合集,阅读专题下面的文章了解更多详细内容。

118

2026.01.21

java版本选择建议
java版本选择建议

本专题整合了java版本相关合集,阅读专题下面的文章了解更多详细内容。

3

2026.01.21

Java编译相关教程合集
Java编译相关教程合集

本专题整合了Java编译相关教程,阅读专题下面的文章了解更多详细内容。

16

2026.01.21

C++多线程相关合集
C++多线程相关合集

本专题整合了C++多线程相关教程,阅读专题下面的的文章了解更多详细内容。

11

2026.01.21

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Django 教程
Django 教程

共28课时 | 3.4万人学习

【web前端】Node.js快速入门
【web前端】Node.js快速入门

共16课时 | 2万人学习

550W粉丝大佬手把手从零学JavaScript
550W粉丝大佬手把手从零学JavaScript

共1课时 | 0.3万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号