jQuery的on()函数用法详解

于 2023-10-04 19:10:03 发布
阅读量356 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： jquery 前端 javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/CsCufft/article/details/133559941
js 专栏收录该内容
299 篇文章 ¥59.90 ¥99.00
订阅专栏
本文详细介绍了jQuery的on()函数，包括绑定点击事件、多个事件、事件委托和传递数据。通过示例代码，展示了如何使用on()函数实现动态元素的事件处理，以及如何在事件处理程序中传递额外信息。

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

jQuery是一种广泛应用于Web开发的JavaScript库，它简化了许多常见的任务，并提供了强大的选择器和操作DOM的功能。其中，on()函数是jQuery中的一个重要方法，用于绑定事件处理程序和动态添加元素。

on()函数用于在一个或多个元素上绑定一个或多个事件处理程序。它的语法如下：

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

参数解释：

  • selector: 要绑定事件的元素选择器。
  • event: 要绑定
了解本专栏 订阅专栏 解锁全文
使用jQuery的on()方法
2301_79326254的博客
09-27 102
jQuery是一个流行的JavaScript库，用于简化JavaScript代码的编写和操作HTML文档。方法，可以轻松地附加事件处理程序，并对动态添加的元素进行处理，为交互性丰富的网页开发提供了便利。方法用于为选定的元素附加一个或多个事件处理程序，并且可以动态地处理新添加到文档中的元素。在上面的示例中，当页面上的按钮被点击时，会弹出一个警告框显示"按钮被点击了！在上面的示例中，当按钮被点击时，会弹出一个警告框显示传递的额外数据。在上面的示例中，当鼠标进入或离开页面上的输入框时，会切换输入框的。
jQuery on方法的用法详解
最新发布
DevPhantom的博客
09-29 274
其中，on方法是jQuery提供的一个重要的事件绑定方法，它允许我们在指定的元素上绑定一个或多个事件处理函数，并在事件触发时执行相应的操作。例如，下面的代码将点击事件委托给id为"myList"的无序列表中的所有li元素，当li元素被点击时，将弹出相应的文本内容。最常见的用法是将事件处理函数绑定到指定的元素上，当事件触发时执行相应的操作。例如，下面的代码将点击事件绑定到id为"myButton"的按钮上，当按钮被点击时，将弹出一个提示框显示"Button clicked!现在我们来看几个常见的应用场景。
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() 函数详解
chelen_jak的专栏
02-27 875
转自：http://www.365mini.com/page/jquery-on.htm on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。
jQuery on()
归家落叶人
11-11 682
jQuery  bind()、delegate()、live()都是通过on()来实现， bind(): 会把所有的event handler加到全部的匹配的元素上，存在一些效率方面的问题 $('a').bind('click', function(){}); live(): 利用事件委托来处理事件的绑定。live()方法会绑定相应元素到你选元素的根元素上，调用live()之
jquery on（）事件
qq_33352505的博客
07-20 510
jquery的绑定事件是会遍历已经存在的元素，然后对其进行事件绑定。因此这样就导致了一个问题，对于动态添加的元素原本写好的jquery的事件无法对其进行绑定。那么解决方案就是on（）事件，它分为多种状态，下面罗列了其支持的事件委托： blur focus focusin focusout load resize scroll unload click dblclick mou
jQuery on()方法使用技巧详解
10-24
主要介绍了jQuery on()方法使用技巧详解,本文讲解了trigger()绑定、多个事件绑定同一个函数、多个事件绑定不同函数、绑定自定义事件、传递数据到函数等技巧,需要的朋友可以参考下
jQuery中on方法使用注意事项详解
10-20
在jQuery中，on方法是一个非常重要的事件处理函数，它用于在指定的元素上绑定事件处理器。本文将详细介绍使用jQuery中on方法时需要注意的几个关键点。 首先，on方法的定义如下：on(eventType,[childSelector],[data...
jQuery中on()方法用法实例详解
10-24
jQuery中的on()方法是用于事件处理的核心方法，它在jQuery 1.7版本引入，旨在替代旧有的bind(), live(), 和delegate()方法。这个方法的主要目的是提供一个更强大、更灵活且性能更好的事件绑定机制。 一、on()方法的...
jQuery之.on()方法
z69183787的专栏
05-04 3958
还不是完全清楚如何使用.on()进行jQuery事件绑定的同学先看这里http://api.jquery.com/on/ jQuery绑定事件的方法有几种，推荐使用.on()方法绑定，原因有两点： 1.on()方法可以绑定动态添加到页面元素的事件 比如动态添加到页面的DOM元素，用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来，也不需要重复绑定。有的同学可能习惯
on()函数使用
weixin_30372371的博客
01-26 388
在初学jquery时，就已经掌握了on()函数的基本用法，用来给DOM元素绑定事件，但是如何在绑定事件的同时向事件处理函数传递参数呢？这就需要了解on()函数的一些细节用法： on()函数的两种使用方法： 用法一：jQueryObject.on( events [, selector ] [, data ], handler ) 用法二：jQueryObject.on( eventsMap [, ...
jquery on方法
wangjun5159的专栏
02-08 512
简介jquery on从jquery1.7开始代替 bind/delegate/live，on用来给current element和further element添加event handler,翻译过来就是，可以用在现在的元素或者现在不存在，但是将来会创建的元素添加事件处理器。实现原理用在未来创建的元素上绑定事件，它是怎么实现的呢？ 基本原理是绑定父元素（确保父元素存在），子元素当前不存在，利用冒
jquery转载
onOneLight的博客
01-21 616
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。 on()支持直接在目标元素上绑定事件，也支持在目标元素的祖辈元素上委托绑定。在事件委托绑定模式下，即使是执行on()函数之...
jquery on函数详解
qq_37891961的博客
05-02 1121
on函数可以做很多事情，可以绑定各种事件，可以配合事件冒泡使用，推荐使用on函数，建议不要用bind。先看一段代码 $(".layui-row").on("click","tr a",function(event){          clonsole.log($(this).html(); )//等同于元素$(tr a).html();  event.stopPropagation();  }...
【转】jQuery on()选择器函数
weixin_30814319的博客
08-23 147
on()函数用于为指定元素的一个或多个事件绑定事件处理函数。 此外，你还可以额外传递给事件处理函数一些所需的数据。 从jQuery 1.7开始，on()函数提供了绑定事件处理程序所需的所有功能，用于统一取代以前的bind()、 delegate()、 live()等事件函数。 即使是执行on()函数之后新添加的元素，只要它符合条件，绑定的事件处理函数也对其有效。 此外，该函数可以为同一元素...
jQuery on()方法实现原理（事件委托）
pony的博客
01-14 4812
html> html lang="en"> head> meta charset="UTF-8"> title>jQuery on()方法实现原理（事件委托）title> style> #list li{ margin: 20px; width: 200px; height: 50px;
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值