JQuery中的bind()和unbind()的理解「建议收藏」

JQuery中的bind()和unbind()的理解「建议收藏」bind()和unbind()提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件。1、JQuery中事件可以重复绑定,不会覆盖。当点击button1的时候,这2个

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

bind()和unbind()提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件。

1、JQuery中事件可以重复绑定,不会覆盖。

1 $("#button1").bind("click",function(){  
2     alert("func1");  
3 });  
4 $("#button1").bind("click",function(){  
5     alert("func2");  
6 });
1 $("#button1").bind("click",sameFunc);  
2 $("#button1").bind("click",sameFunc);  
3   
4 function sameFunc()  
5 {  
6     alert("func");  
7 } 

当点击button1的时候,这2个事件处理函数都会触发。上面绑定的是不同的匿名函数,占用不同的内存空间。就算是同一个处理函数,依然存在重复绑定问题。当button1被点击的时候,上面的事件处理函数同样会被调用2次。

2、使用bind一次绑定多个事件和处理函数。

如果多个事件需要注册相同的处理函数,那么可以使用如下代码进行简化(事件名称使用空格分隔):

1 $("#button1").bind("mousedown mouseup",function(){  
2     console.log(11);  
3 }); 

如果每个事件的处理函数不同,那么可以使用如下的方式(json对象):

 1 $("#button1").bind(  
 2     {  
 3         "mousedown":function(){  
 4             console.log("mousedown");  
 5         },  
 6         "mouseup":function(){  
 7             console.log("mouseup");  
 8         }  
 9     }  
10 ); 

3、传递event对象和自定义参数

 

1 $("#button1").bind("click", {name:"aty"}, function(eventObject){    
2     alert("params=" + eventObject.data.name);    
3 }); 

eventObject很像IE和FF中的event对象,通过它能够获取事件发生时更详细的信息。如果我们指定了自定义的参数,那么JQuery会将它放在事件对象的data属性中,即通过eventObject.data就能够拿到我们传递的参数值。

4、事件取消的三种形式。

unbind用来取消之前通过bind绑定的事件处理函数,总的来说有三种形式:取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。

 

 1 $("#button1").bind("click",func1);   
 2 $("#button1").bind("click",func2);   
 3   
 4 // try to cancel function2  
 5 $("#button1").unbind("click",func2);   
 6   
 7 function func1()  
 8 {  
 9     console.log("click1");    
10 }  
11   
12 function func2()  
13 {  
14     console.log("click2");    
15 } 

 

$(“#button1”).unbind():取消button1上所有已经绑定的事件处理函数。

$(“#button1”).unbind(“click”):只取消button1上绑定的click类型的事件处理函数。

 

虽然bind和unbind是用的匿名函数功能是相同的,但是这2个函数不是同一个javascript对象,因为它们占用不同的内存空间。可以看到这种做法非常的不好,因为这种做法不允许使用匿名函数,我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制

5、事件命名空间。

所谓事件命名空间,其实就是在事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。

1 $("#button1").bind("click.a",function(eventObj){    
2     console.log("click1");    
3 });   
4 $("#button1").bind("click.b",function(eventObj){    
5     console.log("click2");    
6 });   
7   
8 // success to cancel function2  
9 $("#button1").unbind("click.a");

可以看到:使用命名空间,能够以一种更优雅的方式取消某种事件类型下的某个事件处理函数。这里值得一提:使用了命名空间与unbind并不冲突,上面三种形式的unbind依然可以正常使用。$(“#button1”).unbind()依然可以取消button1上的所有事件,$(“#button1”).unbind(“click”)依然可以取消所有的click事件。

1 $("#button1").unbind("click.a");  
2 $("#button1").unbind("mouseup");  
3 $("#button1").unbind("mousedown");  
4 $("#button1").unbind(".a");  

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167571.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 常用的CSS3选择器

    常用的CSS3选择器常用的CSS选择器CSS选择器的作用就是从HTML页面中找出特定的某类元素。常用的几类CSS选择器如下表所示。伪选择器比较特殊,分为伪元素和伪类元素两种。一、属性选择器1.E[att^=value]属性选择器E[att^=value]属性选择器是指选择名称为E的标记,且该标记定义了att属性,att属性值包含前缀为value的子字符串。需要注意的是E是可以省略的,如果省略则表示可以匹配…

  • 宽字节注入详解_pba商业分析师含金量

    宽字节注入详解_pba商业分析师含金量尽管现在呼吁所有的程序都使用unicode编码,所有的网站都使用utf-8编码,来一个统一的国际规范。但仍然有很多,包括国内及国外(特别是非英语国家)的一些cms,仍然使用着自己国家的一套编码,比如gbk,作为自己默认的编码类型。也有一些cms为了考虑老用户,所以出了gbk和utf-8两个版本。我们就以gbk字符编码为示范,拉开帷幕。gbk是一种多字符编码,具体定义自行百度。但有一个地方尤其要…

    2022年10月15日
  • mysql建立联合索引_mysql之联合索引

    mysql建立联合索引_mysql之联合索引mysql之联合索引测试:前期准备:建立联合索引?CREATETABLE`test`(`id`bigint(16)NOTNULLAUTO_INCREMENT,`aaa`varchar(16)NOTNULL,`bbb`varchar(16)NOTNULL,`ccc`int(11)NOTNULL,PRIMARYKEY(`id`))ENGINE=InnoDBDEF…

  • 关于AssetBundle

    关于AssetBundle前阵子研究了一下Untiy的AssetBundle,把相关的一些知识点整理跟大家分享一下。1、什么是AssetBundleAssetBundle是Unitypro提供的一种用来存储资源的文件格式,它可以存储任意一种Unity引擎能够识别的资源,如Scene、Mesh、Material、Texture、Audio、noxss等等,同时,AssetBundle也可以包含开

  • Android代码混淆之混淆规则

    Android代码混淆之混淆规则因为Android是使用Java开发的,所以开发者可以使用ProGuard对代码进行混淆。SDK已经集成了ProGuard工具,开发者可以从SDK目录下的\tools\proguard目录中进行查看。    ProGuard是一个免费的Java类文件收缩,优化,混淆和预校验器。它可以检测并删除未

  • 舵机控制原理和结构图_舵机的相关原理与控制原理

    舵机控制原理和结构图_舵机的相关原理与控制原理原文:https://blog.zeruns.tech/index.php/archives/358/什么是PWM信号PWM,英文名PulseWidthModulation,是脉冲宽度调制缩写,它是通过对一系列脉冲的宽度进行调制,等效出所需要的波形(包含形状以及幅值),对模拟信号电平进行数字编码,也就是说通过调节占空比的变化来调节信号、能量等的变化,占空比就是指在一个周期内,信号处于高电平…

    2022年10月26日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号