2022-02-15 jQuery的on方法中的多个参数分别代表的含义

原创 已于 2022-11-10 10:08:09 修改 · 385 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #前端 #javascript

于 2022-02-15 21:33:45 首次发布
这篇博客详细介绍了jQuery的on()方法，包括参数event、childSelector和data的用法。on()方法用于在匹配的元素上绑定事件处理程序，特别是对于动态添加的子元素。childSelector参数允许指定只对特定子元素添加事件监听，而data参数可以传递额外参数到事件处理函数。文中特别强调了在大型容器元素上绑定事件，通过childSelector指定子元素来实现精确的事件触发，这在动态内容更新的场景中非常实用。
语法:$(selector).on(event, childSelector,data,function)；
参数说明：

  • event 必须 事件的名称(可以自定义) 支持绑定多个事件 多个事件用空格分开 也可以是map参数和数组

  • childSelector 可选 添加事件程序的子元素而且不是父选择器本身

  • data 可选 传递到事件对象 event的额外的参数

-function 必选 规定事件发生时运行的函数

主要是childSelector和data两个可选参数不常见
使用场景

在大div里绑定点击事件,on参数中写其子元素,可以触发针对子元素的事件

jQuery的on方法的参数详解
ByteProwl的博客
10-06 492
jQuery是一个广泛应用于前端开发的JavaScript库，它提供了丰富的功能和简化的语法，使得操作网页元素和处理事件变得更加便捷。它可以用于为一个或多个元素绑定一个或多个事件，并在事件触发时执行相应的处理函数。其中，selector表示要绑定事件的元素选择器，event表示要绑定的事件类型，handler表示事件触发时要执行的处理函数。on方法还支持传递额外的参数，以及使用事件委托的方式绑定事件。以上是对jQuery的on方法参数的详细解释和使用示例。下面将详细介绍on方法的参数及其使用方式。
jQuery on方法传递参数示例
10-25
在本例中，提到的传递参数示例，实际上演示了如何在jQuery的on方法中传递一个包含多个键值对的对象作为参数，并在事件处理函数中使用这些参数。具体来说，当用户点击指定的元素（此处为具有loadingFlower类的元素）...
jQuery中的on方法详细介绍
冰雪为融的博客
06-19 2867
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。如需移除事件处理程序，请使用 off() 方法。如需添加只运行一次的事件然后移除，请使用 one() 方法。语法：.on( events [, selector ] [, data ], handler(eventObject) )events：类型: String（必选）一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，...
jQuery .on() 方法完全指南：终极事件处理大师
最新发布
weixin_42107409的博客
10-18 324
本文全面介绍了jQuery的.on()方法，帮助开发者掌握事件处理的核心功能。文章首先解释了.on()作为统一事件处理接口的优势，重点介绍了其事件委托机制，通过将处理器绑定在静态父元素上，实现对动态内容的支持并提升性能。随后详细解析了.on()的基础语法和高级用法，包括多事件绑定、数据传递等技巧。特别介绍了事件命名空间的使用，帮助开发者精准控制事件移除。最后通过一个动态待办事项列表的实战案例，展示了如何综合运用.on()的各种功能。本文适合所有jQuery开发者学习，帮助编写更高效、健壮的JavaScrip
jqueryon方法参数
weixin_35426913的博客
07-21 170
jQuery on 方法参数科普 jQuery 是一个快速、小巧、功能丰富的 JavaScript 库。它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。在 jQuery 中，on 方法是一个非常重要的事件处理函数。本文将通过代码示例和图表，为您详细解释 on 方法的参数。 jQuery on 方法简介 on...
JQuery学习笔记
weixin_30454481的博客
05-05 491
jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities 优点： 简化JS的复杂操作 不再需要关心兼容性 提供大量实用方法 jQuery 语法 jQuery 语法是为 ...
jQuery（八）绑定事件
qq_38904347的博客
09-27 190
on()方法 说明：方法在被选元素及子元素上添加一个或多个事件处理程序。 语法：$(selector).on(event,childSelector,data,function) event：必需。规定要从被选元素移除的一个或多个事件或命名空间。由空格分隔多个事件值，也可以是数组。必须是有效的事件。 childSelector：可选。规定只能添加到指定的子元素上的事件处理程序，且不是选择器本身。 ...
jQuery中on()方法用法实例
12-09
本文实例讲述了jQuery中on()方法用法。分享给大家供大家参考。具体分析如下： 此方法可以在匹配元素上绑定一个或者多个事件处理函数。 使用off()方法可以删除on()方法绑定的事件。 语法结构一: 代码如下:$(selector...
jQuery中on方法使用注意事项详解
12-03
在jQuery中，`on`方法是一个非常重要的事件绑定工具，它允许我们以高效且灵活的方式为元素添加事件监听器。`on`方法采用事件委托机制，这意味着它不仅可以为当前存在的元素绑定事件，还可以处理将来可能动态添加到...
jQuery中on()方法用法实例详解
10-24
jQuery中的on()方法是用于事件处理的核心方法，它在jQuery 1.7版本引入，旨在替代旧有的bind(), live(), 和delegate()方法。这个方法的主要目的是提供一个更强大、更灵活且性能更好的事件绑定机制。 一、on()方法的...
Vue $on、$emit的实现
meng_xiaoxiao的博客
06-03 1200
1、$on的用法：接收2个参数，返回对象的本身； 第一个参数是字符串或者字符串数组。 第二参数是回调函数。 2、$emit的用法：接收1+n个参数，返回对象的本身； 第一个参数是字符串； 第n参数是作为回调函数的参数。...
jQuery中on()和click()区别
玩垃圾的人
05-26 5047
前言    click()属于静态加载，当页面加载完，就不在为新增加的元素添加点击事件。     on()属于动态加载，当页面加载完，可以为新增加的元素添加事件。但是必须选定负级元素。运用     如果想使用on()动态加载事件，记得一定要选择父级元素，否则没有效果，只会作用于本事。     <html> <head> <script type="text/javas...
jQuery事件（重点）
m0_51281306的博客
03-22 729
1问：什么是事件？ 答：事件是在文档中或者在浏览器窗口中通过某些动作触发。比如，单击，鼠标经过，键盘按下等。事件通常和函数结合使用。 Javascript中的事件在jquery都是可以使用的，只是有一点区别，jQuery简化了javascript事件的操作，绑定事件时，没有on关键字。 我们先看一个默认触发一个单击的案例 jQuery常用事件 （1）click事件： 语法格式： click(‘数据’，回调函数); mouseover和mouseenter的应用 mouseover：事件在鼠
jquery on方法原理_关于jQuery中on()方法的用法
weixin_34274601的博客
01-14 1303
今天突然用到了jQuery中on()方法，由于on()方法用途很广泛，在其他语言中也有此方法，但是感觉自己对这个方法还没有深入的了解过，于是乎想自己总结梳理一下。开始正文：语法结构一:代码如下:$(selector).on(events,[selector],[data],fn)参数列表：参数 描述events ：一个或者多个用空格(记住是用空格，而不是逗号)分隔的事件类型和可...
jquery：$.on(event,[selector],[data],fn)
u014081297的专栏
04-15 2502
1、$.on() 在选择元素上绑定一个或多个事件的事件处理函数。 on
jQuery on()方法
weixin_30765577的博客
02-12 524
jQuery on()方法是官方推荐的绑定事件的一个方法。 $(selector).on(event,childSelector,data,function,map) 由此扩展开来的几个以前常见的方法有. bind() 　　$("p").bind("click",function(){ 　　　　alert("The paragraph was clicked."); 　　}); ...
jQuery on() 方法被选元素添加同一个事件都会被执行
caihuawei123的博客
05-21 352
<script> $(document).ready(function(){ $("p").on("click",function(){ alert("我被点击了。"); }); $("p").on("click",function(){ alert("我再次被点击了。"); }); }); </script> </head> <body> <p>点击这个段落。</p> 注意：被选元素添加同一个事件都会
jquery中on方法有几个参数
06-08
在 jQuery 中，on() 方法有多个重载形式，可以接受不同数量的参数。最基本的形式是接受两个参数，第一个参数是事件类型，第二个参数是事件处理函数。例如： ``` $(selector).on(event, handler) ``` 此外，on() ...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值