位置: 编程技术 - 正文

jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

编辑:rootadmin

推荐整理分享jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法。分享给大家供大家参考,具体如下:

前言

因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题。

一、bind()

简要描述

bind()向匹配元素添加一个或多个事件处理器。

使用方式event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如多事件处理:1.利用空格分隔多事件,例如2.利用大括号灵活定义多事件,例如3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;

data:可选;需要传递的参数;function:必需;当绑定事件发生时,需要执行的函数;

举例说明

适用Jquery版本

适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。

二、live()

简要描述

live() 向当前或未来的匹配元素添加一个或多个事件处理器;

使用方式event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如多事件处理:1.利用空格分隔多事件,例如2.利用大括号灵活定义多事件,例如3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;

data:可选;需要传递的参数;function:必需;当绑定事件发生时,需要执行的函数;

举例说明

适用Jquery版本

jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替。

三、delegate()

简要描述

delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

单事件处理:例如多事件处理:1.利用空格分隔多事件,例如 2.利用大括号灵活定义多事件,例如 3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;

data:可选;需要传递的参数;function:必需;当绑定事件发生时,需要执行的函数;

举例说明

适用Jquery版本

jquery1.4.2及其以上版本;

四、on()

简要描述

on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。

使用方式event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;

单事件处理:例如多事件处理:1.利用空格分隔多事件,例如2.利用大括号灵活定义多事件,例如3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;

大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;

childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素; data:可选;需要传递的参数;function:必需;当绑定事件发生时,需要执行的函数;

举例说明

适用Jquery版本

jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

五、四种方式的异同和优缺点

相同点:

1.都支持单元素多事件的绑定;空格相隔方式或者大括号替代方式;2.均是通过事件冒泡方式,将事件传递到document进行事件的响应;

比较和联系:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate()均支持未来新添加元素的事件设置;演示代码如下:

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些,想了解具体情况,请参考这篇《jQuery中的.bind()、.live()和.delegate()之间区别分析》

4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;

六、总结

如果项目中引用jquery版本为低版本,推荐用delegate(),高版本jquery可以使用on()来代替,以上仅为个人看法,如有不同想法,欢迎拍砖交流。

更多关于jQuery事件相关内容感兴趣的读者可查看本站专题:《jQuery常见事件用法与技巧总结》

希望本文所述对大家jQuery程序设计有所帮助。

jQuery绑定事件监听bind和移除事件监听unbind用法实例详解 本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参考,具体如下:这里分别采用后bind(eventType,[data],Listener)//data为可选

jQuery unbind()方法实例详解 本文实例讲述了jQueryunbind()方法使用方法。分享给大家供大家参考,具体如下:jQuery中的unbind()方法是bind()方法的反向操作,从每一个匹配的元素中删除

在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏) 下面小编给大家整理了8个技巧对程序员来说非常的有帮助,具体如下所示:1)禁用鼠标右键单击jQuery程序员可以使用此代码在网页上禁用鼠标右键点击

标签: jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

本文链接地址:https://www.jiuchutong.com/biancheng/380643.html 转载请保留说明!

上一篇:jQuery事件绑定用法详解(附bind和live的区别)(jquery常用的事件绑定函数有哪些)

下一篇:jQuery绑定事件监听bind和移除事件监听unbind用法实例详解(jquery绑定事件和移除事件)

  • 应纳税所得额为负数是什么意思
  • 按适用税率征税销售额等于销售收入吗
  • 偷税漏税逃税是什么意思
  • 销售收入怎么做会计凭证
  • 三方合同怎么盖章
  • 资本化利息支出在哪个科目
  • 企业注销增值税留抵可以退吗
  • 银行现金增加会计分录
  • 股东投入的资金怎么做账
  • 关联的公司
  • 公司缴纳个人所得税会计分录
  • 用盈余公积弥补亏损会影响所有者权益吗
  • 以前年度损益调整账务处理分录
  • 跨月发票作废怎么操作流程
  • 递延所得税费用影响净利润吗
  • 所得税补缴自查需要缴纳什么
  • 技术调试费用开几个点税
  • 有哪些固定资产可以抵税
  • 公司加农户经营模式
  • 自购自销金银首饰应纳消费税如何处理?
  • w11系统激活码
  • 简易征收办法征收一般纳税人
  • 驾校收入与成本的关系
  • win10升级win11报错
  • 一般纳税人做账报税的整个流程详细
  • 购买财务软件申请怎么写
  • 项目融资中风险有哪些
  • explore.exe
  • thinkphp多数据库连接
  • 预提的奖金需要缴纳个人所得税吗
  • 私企固定资产管理办法
  • 滞纳金不得超过税款
  • 工业企业的费用
  • nerf 怎么瞄准
  • 收外汇怎么做账报税
  • js倒数
  • 2023跨年烟花链接
  • 应收贷方有余额怎么调整
  • 企业会计准则季报利润表本期金额怎么填
  • 专票地址错了要作废吗
  • 事业单位收到银行利息如何记账
  • 非流动资产基金 新会计制度 对应
  • 公司多余的钱叫什么
  • 母公司资产包括子公司吗
  • dedecms模版
  • 小规模免税怎么做账务处理
  • 普票 销项
  • 受托代销商品的成本结转
  • SQL server2008数据不存储,重启后正常
  • sql 存储过程语句
  • 如何理解合并报表编制程序中的调整与抵消处理
  • 计提折旧会计分录怎么做
  • 筹建期间业务招待费的财税处理规定
  • 旅行社差额征税全额开票和差额开票
  • 契税的计税金额是什么
  • 跨年取得的费用票怎么做账
  • 进项税可以跨年结转吗
  • 建筑工程社会实践报告
  • 公司运营成本如何计算
  • 专利年费可以减免吗
  • 逾期纳税申报会被罚款吗
  • 期末留抵税额和上期留抵税额
  • 10种Java开发者编写SQL语句时常见错误
  • centos下安装jdk
  • mysql处理海量数据
  • thinkpad x230笔记本电脑
  • win10系统无法运行exe文件
  • win7 64位系统无法清空回收站的故障原因及解决方法
  • win8 cmd在哪
  • centos6.5忘记密码
  • postgres.exe是什么进程 postgres进程查询
  • win7如何压缩图片
  • jquery炫酷效果
  • easyui combotree加载静态数据问题(选不上)解决方法
  • nodejs获取当前时间
  • unityui渲染顺序
  • js会话
  • jquery去重复数组
  • 月度申报如何改为季度申报
  • 云税票管家是什么软件
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设