浅谈jquery之on()绑定事件和off()解除绑定事件
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代码
1
2
3
|
< input id = "btn1" type = "button" value = "点击1" />
< input id = "btn2" type = "button" value = "点击2" />
< a id = "a1" href = "#" >CodePlayer</ a >
|
页面加载时执行的jquery代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
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就会捕获该事件,从而执行绑定的事件处理函数。
转载于:https://www.cnblogs.com/telwanggs/p/9212546.html
浅谈jquery之on()绑定事件和off()解除绑定事件相关推荐
- 浅谈jQuery Mobile设计思想
来自51CTO技术社区:http://mobile.51cto.com/others-288591.htm jQuery Mobile设计思想是本文要介绍的内容,主要是来了解jQuery Mobile ...
- php中jquery ajax请求参数,浅谈Jquery中Ajax异步请求中的async参数的作用
之前不知道这个参数的作用,上网找了前辈的博客,在此收录到自己的博客,希望能帮到更多的朋友: test.html asy.js function testAsync{ var temp; $.ajax( ...
- 浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别
举例浅谈JQuery中$('.classname').get(0); $('.classname').eq(0); $('.classname')[0]三者的区别 demo Dom结构: <di ...
- js首次修改html无效,浅谈jQuery添加的HTML,JS失效的问题
浅谈jQuery添加的HTML,JS失效的问题 如下图所示, 点击添加后,会新添加一行,但是二级联动就失效了, $('.provinceList').live('change', function() ...
- 浅谈jQuery属性获取
浅谈jQuery的属性获取 基本标签设置与基本css,附图下所示 上述代码如下图: 一.js的一些属性获取 1.var div = document.getElementById("firs ...
- java easing_浅谈jQuery animate easing的具体使用方法(推荐)
从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: ...
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
- java中jquery怎么学,浅谈jQuery中的事件--Java学习网
核心提示:JQuery事件初见1.JQuery中的事件绑定其实呢,JQuery中标准的事件绑定是这样写下:(如下)代码如下:$('#btn').bind('click',function(){}):但 ...
- 浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建 ...
最新文章
- 90 vuex axios
- python字典的setdefault方法和get方法
- 如何让listView加入的HeaderView不可点击【转】
- 数据结构树4-二叉搜索树2
- 严格地说来的zhajinhuagame
- Java中equals()和“==”区别
- C# 编程指南-事件
- 【优化预测】基于matlab遗传算法优化BP神经网络预测【含Matlab源码 1376期】
- 非常经典的java编程题全集-共50题(1-10)
- wgs84坐标系拾取工具_Wgs84坐标系转换为gcj02坐标系及bd09坐标系的验证
- 迅雷下载电影天堂片源,出现“应版权方要求,文件无法下载”的解决方法
- js实现网页在线聊天功能(一)
- http://www.feedsky.com/help_publishwidget.html
- 【uniapp】小程序添加通过卡号查找银行名并添加绑定等逻辑
- 编写程序解决“百钱买百鸡”问题。公鸡五钱一只,母鸡三钱一只,小鸡一钱三只,现有百钱欲买百鸡,共有多少种买法?
- incre在c语言,longest incresing sequence
- 【博客园-问题反馈】使用谷歌浏览器 百度图床图片无法显示
- QEMU中通过GPA得到对应HVA的方法
- 面对工业4.0,我国工业企业的挑战与对策
- AWS S3 - 从S3下载数据
热门文章
- 基于Jenkins的嵌入式软件持续集成方法
- (14)FPGA面试技能提升篇(nlint工具、CDC方法)
- (10)verilog语言编写SPI发送
- 华为鸿蒙系统是物联网,华为鸿蒙系统官宣!谷歌工程师直接懵了,硅谷感慨:中国人太厉害...
- phpmyadmin mysql更新_mysql利用phpmyadmin实现数据库同步更新
- php框架 swoop_PHP Form Validation
- js实现excel块拖拉数据_小程序导出数据到excel表,借助云开发云函数实现excel数据的保存...
- 【好文链接】从原理上搞懂PID
- 隐藏a标签seo_SEO网站优化,新手SEO常犯的五个错误!
- clock_gettime系统调用详解