位置: 编程技术 - 正文

浅谈jquery之on()绑定事件和off()解除绑定事件(jquery one())

编辑:rootadmin

推荐整理分享浅谈jquery之on()绑定事件和off()解除绑定事件(jquery one()),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:jqueryon方法,jquery on函数,jquery on函数,jqueryon方法,jquery on(),jquery on(),jquery on(),jquery中on的用法,内容如对您有帮助,希望把文章链接给更多的朋友!

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数。

off()函数主要用于解除由on()函数绑定的事件处理函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.7 新增该函数。其主要有以下两种形式的用法:

用法一:

jQueryObject.off( [ events [, selector ] [, handler ] ] )

用法二:

jQueryObject.off( eventsMap [, selector ] )

参数

参数 描述 events 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。 eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。 selector 可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。 handler 可选/Function类型指定的事件处理函数。

off()函数将会移除当前匹配元素上为后代元素selector绑定的events事件的事件处理函数handler。

如果省略参数selector,则移除为任何元素绑定的事件处理函数。

参数selector必须与通过on()函数添加绑定时传入的选择器一致。

如果省略参数handler,则移除指定元素指定事件类型上绑定的所有事件处理函数。

如果省略了所有参数,则表示移除当前元素上为任何元素绑定的任何事件类型的任何事件处理函数。

返回值off()函数的返回值为jQuery类型,返回当前jQuery对象本身。

实际上,off()函数的参数全是筛选条件,只有匹配所有参数条件的事件处理函数才会被移除。参数越多,限定条件就越多,被移除的范围就越小。

off()方法的代码示例:

容易忽略的点:off所解除元素的绑定事件,其中选择器必须和on绑定事件时所用的选择器一致。

html代码

页面加载时执行的jquery代码

浅谈jquery之on()绑定事件和off()解除绑定事件(jquery one())

on()函数用于为指定元素的一个或多个事件绑定事件处理函数。

此外,你还可以额外传递给事件处理函数一些所需的数据。

从jQuery 1.7开始,on()函数提供了绑定事件处理程序所需的所有功能,用于统一取代以前的bind()、 delegate()、 live()等事件函数。

即使是执行on()函数之后新添加的元素,只要它符合条件,绑定的事件处理函数也对其有效。

此外,该函数可以为同一元素、同一事件类型绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

要删除通过on()绑定的事件,请使用off()函数。如果要附加一个事件,只执行一次,然后删除自己,请使用one()函数。

该函数属于jQuery对象(实例)。

语法

jQuery 1.7 新增该函数。其主要有以下两种形式的用法:

用法一:

jQueryObject.on( events [, selector ] [, data ], handler )

用法二:

jQueryObject.on( eventsMap [, selector ] [, data ] )

参数

参数 描述 events String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。 eventsMap Object类型一个Object对象,其每个属性对应事件类型和可选的命名空间(参数events),属性值对应绑定的事件处理函数(参数handler)。 selector 可选/String类型一个jQuery选择器,用于指定哪些后代元素可以触发绑定的事件。如果该参数为null或被省略,则表示当前元素自身绑定事件(实际触发者也可能是后代元素,只要事件流能到达当前元素即可)。 data 可选/任意类型触发事件时,需要通过event.data传递给事件处理函数的任意数据。 handler Function类型指定的事件处理函数。

关于参数events中可选的命名空间,请参考最下面的示例代码。

关于参数selector,你可以简单地理解为:如果该参数等于null或被省略,则为当前匹配元素绑定事件;否则就是为当前匹配元素的后代元素中符合selector选择器的元素绑定事件。

参数handler中的this指向当前匹配元素的后代元素中触发该事件的DOM元素。如果参数selector等于null或被省略,则this指向当前匹配元素(也就是该元素)。

on()还会为handler传入一个参数:表示当前事件的Event对象。

参数handler的返回值与DOM原生事件的处理函数返回值作用一致。例如"submit"(表单提交)事件的事件处理函数返回false,可以阻止表单的提交。

如果事件处理函数handler仅仅只为返回false值,可以直接将handler设为false。

返回值

on()函数的返回值为jQuery类型,返回当前jQuery对象本身。

重要说明:

on()函数并不是为当前jQuery对象匹配的元素绑定事件处理函数,而是为它们的后代元素中符合选择器selector参数的元素绑定事件处理函数。on()函数并不是直接为这些后代元素挨个绑定事件,而是委托给当前jQuery对象的匹配元素来处理。由于DOM 2级的事件流机制,当后代元素selector触发事件时,该事件会在事件冒泡中传递给其所有的祖辈元素,当事件流传递到当前匹配元素时,jQuery会判断是哪个后代元素触发了事件,如果该元素符合选择器selector,jQuery就会捕获该事件,从而执行绑定的事件处理函数。

标签: jquery one()

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

上一篇:jquery移除了live()、die(),新版事件绑定on()、off()的方法(jquery移出class)

下一篇:jQuery的ready方法实现原理分析(jquery(document).ready)

  • 个体工商户增值税优惠政策2023
  • 利润表中利息费用包括什么
  • 增值税是5%的是什么
  • 对公账户汇款方式
  • 资产处置收益计入利润总额吗
  • 电商存货周转率的正常范围
  • 分公司转独立公司
  • 中小企业所得税优惠政策有哪些
  • 税法对固定资产大修理
  • 出售旧房及建筑物计算土地增值税
  • 非居民企业投资收益
  • 税控盘忘记抄报反写怎么办
  • 合并会计报表长期股权投资
  • 内账怎么收费
  • 外购商品计入
  • 生产企业的安全员好干吗
  • 个体广告用去税务报账吗?
  • 职工食堂的费用怎么入账
  • 认证抵扣完的发票怎么处理
  • 民办非企业单位设立分机构
  • 分公司有法律效力吗
  • 季节性停工算作固定资产停止使用吗?
  • 融资租赁要怎么做
  • 递延所得税资产是什么
  • win11重置系统保留我的文件
  • 旅游公司广告费支出扣除标准
  • 如何把私人账户冻结
  • 资产负债表中的货币资金怎么算
  • 稳增长促转型
  • 俄勒冈州邮编
  • php数组函数,选班长
  • 增值税专用发票查询系统官方网站
  • php枚举类
  • php 设计模式 鸟哥
  • 客户抽奖活动方案
  • 经营特许权
  • Chrome谷歌浏览器网页
  • 应付职工薪酬资产还是负债
  • 2023 最新最细 vite+vue3+ts 多页面项目架构,建议收藏备用!
  • 工程项目会计怎么样
  • 【角色扮演】
  • 开源项目排行榜
  • vuecli怎么使用自定义组件
  • 未分配利润是负数是亏损吗
  • 异地工作人员管理
  • 主营营业成本会计分录
  • 退税没有退的部分怎么做账
  • 机器维修费属于什么会计科目
  • 背书转让流程图
  • 横幅属于是什么税收大类?
  • sql语句修改某个字段
  • 私车公用私车的区别在哪
  • 政府发的奖金需要交个税吗
  • 税金及附加怎么算
  • 收到暂估跨年发票怎么办
  • 土地使用税如何计算公式
  • 无形资产的项目有哪些
  • 事业单位 abc类
  • 固定资产发票怎么处理
  • 通信费抬头为个人
  • 如何把数据导入mysql中
  • 此数据库中不存在用户或角色
  • mysql命令行导出结果
  • 微软9月30日将发行股票
  • 硬盘安装fedora35
  • 苹果笔记本mac系列区别
  • nacos监控服务
  • win8的设置
  • javascript基于什么的语言
  • cocos2d怎么用
  • cocos2djs
  • Unity3D游戏开发毕业论文
  • ftp自动上传脚本怎么用
  • js修改内容
  • android auto翻译
  • python语言文件
  • js实现复制文本
  • jquery的哪个方法可以绑定mouseover
  • 内蒙古国家税务
  • 广东发票查验平台下载
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设