jQuery on方法的用法详解

于 2023-09-29 08:51:47 发布
阅读量274 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery 前端 javascript 编程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/DevPhantom/article/details/133409065
编程 专栏收录该内容
378 篇文章 ¥29.90 ¥99.00
订阅专栏
这篇博客详细介绍了jQuery的on方法，包括其基本语法、动态绑定、事件委托、停止事件冒泡和默认行为等功能，并给出了多个示例代码，帮助读者理解和运用此方法。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

jQuery是一种广泛应用于Web开发的JavaScript库，它简化了HTML文档遍历、事件处理、动画效果等操作。其中，on方法是jQuery提供的一个重要的事件绑定方法，它允许我们在指定的元素上绑定一个或多个事件处理函数，并在事件触发时执行相应的操作。下面将详细介绍jQuery on方法的用法，并提供相应的源代码示例。

基本语法：

$(selector).on(event, childSelector, data, handler);

参数说明：

  • se
了解本专栏 订阅专栏 解锁全文
使用jQuery的on()方法
2301_79326254的博客
09-27 99
jQuery是一个流行的JavaScript库，用于简化JavaScript代码的编写和操作HTML文档。方法，可以轻松地附加事件处理程序，并对动态添加的元素进行处理，为交互性丰富的网页开发提供了便利。方法用于为选定的元素附加一个或多个事件处理程序，并且可以动态地处理新添加到文档中的元素。在上面的示例中，当页面上的按钮被点击时，会弹出一个警告框显示"按钮被点击了！在上面的示例中，当按钮被点击时，会弹出一个警告框显示传递的额外数据。在上面的示例中，当鼠标进入或离开页面上的输入框时，会切换输入框的。
jQuery中on方法使用注意事项详解
10-20
本文将详细介绍使用jQuery中on方法时需要注意的几个关键点。 首先，on方法的定义如下：on(eventType,[childSelector],[data],fn)。这个方法采用事件委托机制，可以将事件处理器绑定到当前或未来动态添加的元素上。...
jQuery on()方法
weixin_30765577的博客
02-12 505
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); ...
jQuery on() 方法
weixin_34217711的博客
05-09 445
jQuery on() 方法 一、总结 1、on方法作用：on() 方法在被选元素及子元素上添加一个或多个事件处理程序。就是用来给所选元素添加事件的。 2、off()方法和one()方法：  注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。 提示：如需移除事件处理程序，请使用 off() 方法。 提示：如需添加只运行一次的事件然后移除，请使...
jQuery的on方法
guoanyong的博客
04-22 666
jQuery中on方法的实现
jQuery on()方法使用技巧详解
10-24
主要介绍了jQuery on()方法使用技巧详解,本文讲解了trigger()绑定、多个事件绑定同一个函数、多个事件绑定不同函数、绑定自定义事件、传递数据到函数等技巧,需要的朋友可以参考下
jQuery中on()方法用法实例详解
10-24
jQuery中的on()方法是用于事件处理的核心方法，它在jQuery 1.7版本引入，旨在替代旧有的bind(), live(), 和delegate()方法。...了解并熟练使用on()方法，能够帮助开发者编写更加高效和可维护的jQuery代码。
jQuery.on() 函数详解
chelen_jak的专栏
02-27 874
转自：http://www.365mini.com/page/jquery-on.htm on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
jQuery中的on方法详细介绍
冰雪为融的博客
06-19 2809
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。如需添加只运行一次的事件然后移除，请使用 one() 方法。语法：.on( events [, selector ] [, data ], handler(eventObject) )events：类型: String（必选）一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，...
jquery on方法
wangjun5159的专栏
02-08 512
简介jquery on从jquery1.7开始代替 bind/delegate/live，on用来给current element和further element添加event handler,翻译过来就是，可以用在现在的元素或者现在不存在，但是将来会创建的元素添加事件处理器。实现原理用在未来创建的元素上绑定事件，它是怎么实现的呢？ 基本原理是绑定父元素（确保父元素存在），子元素当前不存在，利用冒
Jquery on方法
我只是个小学生 能力有限 一直抱着学习的态度
06-18 808
<div class="search"> <!--已选类别--> <div class="atp_choosed overflow"> <div class="left title col666">已选类别：</div> <div class="left conn" style="width: 780px;"&g...
jQuery里的on()方法
YYID6666的博客
10-20 706
定义： on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 语法： $(selector).on(event,childSelector,data,function) $('body').on('click', 'ul>li', function() 参数 描述 event String类型一个或多个用空格分隔的事件类型和可选的命名空间，例如"click"、“fo...
jquery on()方法
weixin_43467561的博客
03-10 161
jquery on()方法 1.给一个事件添加一个函数 2.同时给多个事件添加同一个函数 多个事件之间用空格隔开 3.给不同的事件添加不同的函数 把on作为一个对象 4.事件委托 $("ul").on("click","li",function(){ //在ul上添加on事件函数 on（点击事件，触发对象的选择器，方法） }) 创建新节点 var i=6; $("#btn1").click(function(){ //想要插入一个新的节点 $(`<li>${i+
学习使用jQuery中的on() 方法
徊忆羽菲
08-18 324
学习使用jQuery中的on方法向 元素添加 click 事件处理程序：定义和用法 向 元素添加 click 事件处理程序： <!DOCTYPE html> <html> <head> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $(".
jquery的on()方法总结
u011927449的博客
05-17 9559
摘自菜鸟教程 废话不说 直接上demo 实例： 向<p>元素添加click事件处理程序: 1 <html> 2 <head> 3 <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"> 4 </script> 5 <script> 6 $(document).ready(function(){ 7 $("p").on("click",fun
jQuery on()
归家落叶人
11-11 681
jQuery  bind()、delegate()、live()都是通过on()来实现， bind(): 会把所有的event handler加到全部的匹配的元素上，存在一些效率方面的问题 $('a').bind('click', function(){}); live(): 利用事件委托来处理事件的绑定。live()方法会绑定相应元素到你选元素的根元素上，调用live()之
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值