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


Posted in Javascript onOctober 26, 2016

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代码

<input id="btn1" type="button" value="点击1" />
 <input id="btn2" type="button" value="点击2" />
 <a id="a1" href="#">CodePlayer</a>

页面加载时执行的jquery代码

function btnClick1(){
  alert( this.value + "-1" );
}

function btnClick2(){
  alert( this.value + "-2" );
}

var $body = $("body");

// 给按钮1绑定点击
$body.on("click", "#btn1", btnClick1 );

// 给按钮2绑定点击
$body.on("click", "#btn2", btnClick2 );

//为所有a元素绑定click、mouseover、mouseleave事件
$body.on("click mouseover mouseleave", "a", function(event){
  if( event.type == "click" ){
    $body.off("click", "#btn1");//取消btn1的绑定事件。成功执行
    alert("点击事件");
    alert("ddd");
  }else if( event.type == "mouseover" ){
    $(this).css("color", "red");
  }else{
    $(this).css("color", "blue");
    
  }
});


// 移除body元素为所有button元素的click事件绑定的事件处理函数btnClick2
// 点击按钮,btnClick1照样执行
$body.off("click", ":button", btnClick2);


// 点击按钮1,不会执行任何事件处理函数
// $body.off("click", "#btn1");


// 注意: $body.off("click", ":button"); 无法移除btn1的点击事件,off()函数指定的选择器必须与on()函数传入的选择器一致。


// 移除body元素为所有元素(包括button和<a>元素)的click事件绑定的所有处理函数
// 点击按钮或链接,都不会触发执行任何事件处理函数
// $("body").off("click");


// 移除body元素为所有元素的任何事件绑定的所有处理函数
// 点击按钮,或点击链接或者鼠标移入/移出链接,都不会触发执行任何事件处理函数
// $("body").off( );

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之on()绑定事件和off()解除绑定事件全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
js下利用控制器载入对应脚本
Jul 17 Javascript
javascript new后的constructor属性
Aug 05 Javascript
js使用栈来实现10进制转8进制与取除数及余数
Jun 11 Javascript
将HTML格式的String转化为HTMLElement的实现方法
Aug 07 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
极易被忽视的javascript面试题七问七答
Feb 15 Javascript
jQuery模拟爆炸倒计时功能实例代码
Aug 21 jQuery
vue实现商城购物车功能
Nov 27 Javascript
基于 D3.js 绘制动态进度条的实例详解
Feb 26 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
Oct 26 #Javascript
Bootstrap 实现查询的完美方法
Oct 26 #Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 #Javascript
jquery延迟对象解析
Oct 26 #Javascript
关于Jquery中的bind(),on()绑定事件方式总结
Oct 26 #Javascript
JavaScript实现的微信二维码图片生成器的示例
Oct 26 #Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 #Javascript
You might like
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
Win2000+Apache+MySql+PHP4+PERL安装使用小结
2006/10/09 PHP
ThinkPHP采用实现三级循环代码实例
2014/07/18 PHP
PHP页面跳转操作实例分析(header方法)
2016/09/28 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jQuery增加自定义函数的方法
2015/07/18 Javascript
JS实现霓虹灯文字效果的方法
2015/08/06 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
2015/09/18 Javascript
jQuery改变form表单的action,并进行提交的实现代码
2016/05/25 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
微信小程序 开发经验整理
2017/02/15 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
JavaScript实现瀑布流图片效果
2017/06/30 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
小程序实现悬浮搜索框
2019/07/12 Javascript
Vue页面切换和a链接的本质区别详解
2019/11/12 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
Python脚本实现12306火车票查询系统
2016/09/30 Python
python+ffmpeg视频并发直播压力测试
2018/03/06 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
英国家用电器购物网站:Hughes
2018/02/23 全球购物
新学期国旗下演讲稿
2014/05/08 职场文书
员工廉洁自律承诺书
2014/05/26 职场文书
竞选纪律委员演讲稿
2014/09/13 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
聊聊golang中多个defer的执行顺序
2021/05/08 Golang