jQuery事件处理的特征(事件命名机制)


Posted in Javascript onAugust 23, 2016

JQuery中的bind()和unbind(),提供了事件的绑定和取消机制,既可以绑定html默认支持的事件,也能够绑定自定义的事件。JQuery支持自定义事件,这显然给编程带来了极大的灵活性。下面就一起学习下,jquery事件处理的一些特性。

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

$("#button1").bind("click",function(){
alert("func1");
});
$("#button1").bind("click",function(){
alert("func2");
});

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

$("#button1").bind("click",sameFunc);
$("#button1").bind("click",sameFunc);
function sameFunc()
{
alert("func");
}

绝大部分场景下,事件处理函数都只需要绑定一次,所以一定要注意JQuery事件的重复绑定这个特性,事件多次执行,就算没有bug,终究也不是好的做法。

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

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

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

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

$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
);

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

一般来说,使用jquery的时候我们很少需要event对象,也不需要向事件处理函数传递自定义的参数。不过如果我们真的需要这么做,JQuery也是支持的。

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

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

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

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

假如我们给button1绑定了click、mouseup、mousedown事件,其中click事件绑定2个处理函数。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown",function(eventObj){ 
console.log("mousedown"); 
});

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

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

这2种形式很好理解,也是我们平时编程最常用的做法。上面的代码我们注册了2个click类型的事件处理函数,如果要取消第2个click事件处理函数,第1个保留,应该怎么办呢?由于我们注册的是匿名函数,所以没有办法实现。下面的代码是错误的,达不到预期的效果。

$("#button1").bind("click",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click",function(eventObj){ 
console.log("click2"); 
}); 
// try to cancel function2
$("#button1").unbind("click",function(eventObj){ 
console.log("click2"); 
});

虽然bind和unbind是用的匿名函数功能是相同的,但是这2个函数不是同一个javascript对象,因为它们占用不同的内存空间。聪明的你可能已经想到:如果bind和unbind使用不同函数,是不是就能达到目的了?确实是这样,下面的代码是正确的。

$("#button1").bind("click",func1); 
$("#button1").bind("click",func2); 
// try to cancel function2
$("#button1").unbind("click",func2); 
function func1()
{
console.log("click1"); 
}
function func2()
{
console.log("click2"); 
}

这就是unbind的第三种使用形式,可以看到这种做法非常的不好,因为这种做法不允许使用匿名函数,我们不得不暴露全局的函数(至少要求unbind的时候能够看得见)。JQuery提供了事件命名空间机制,个人感觉就是为了解决这个问题。

5、事件命名空间。

上面已经提到,事件命名空间就是为了解决unbind第三种形式遇到的问题。下面是JQuery官方API文档的解释:

Instead of maintaining references to handlers in order to unbind them, we can namespace the events and use this capability to narrow the scope of our unbinding actions.

所谓事件命名空间,其实就是在事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。由于点号是用来定义命名空间的,所以如果我们使用了自定义事件,那么事件名称一定不要包含点号,否则会引起意想不到的问题。这种问题,没有尝试的必要,特殊字符能不用则不用,否则是给自己找麻烦。

$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
// success to cancel function2
$("#button1").unbind("click.a");

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

使用命名空间还要1个好处:能够按照命名空间来取消事件。

// 2个命名空间a和b
$("#button1").bind("click.a",function(eventObj){ 
console.log("click1"); 
}); 
$("#button1").bind("click.b",function(eventObj){ 
console.log("click2"); 
}); 
$("#button1").bind("mouseup.a",function(eventObj){ 
console.log("mouseup"); 
}); 
$("#button1").bind("mousedown.a",function(eventObj){ 
console.log("mousedown"); 
});

这段代码我们使用2个命名空间a和b,如果我只想要保留第2个click事件处理函数,其余的全部删除。我们可以有2种方式达到目的:

方式1:

$("#button1").unbind("click.a");
$("#button1").unbind("mouseup");
$("#button1").unbind("mousedown");

方式2:

$("#button1").unbind(".a");

很显然方式2更加简单,更加技巧性,虽然代码更不容易看懂,不过只要你熟悉JQuery就能看懂。项目中如果出现了你看不懂的代码,只有2种情况:要么别人不行,代码写的烂;要么自己不行,知识懂的少。如果不熟悉某种语言,又怎能用它写好代码呢?所以,代码质量、开发效率,和个人技能水平,团队水平紧密相关。

以上所述是小编给大家介绍的jQuery事件处理的特征(事件命名机制),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 事件冒泡简介及应用
Jan 11 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
JavaScript判断微信浏览器实例代码
Jun 13 Javascript
jQuery基本过滤选择器用法示例
Sep 09 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
js编写简单的聊天室功能
Aug 17 Javascript
karma+webpack搭建vue单元测试环境的方法示例
May 24 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
vscode配置vue下的es6规范自动格式化详解
Mar 20 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 Javascript
深入浅出 jQuery中的事件机制
Aug 23 #Javascript
javascript实现简单的on事件绑定
Aug 23 #Javascript
js实现图片淡入淡出切换简易效果
Aug 22 #Javascript
JS对HTML表格进行增删改操作
Aug 22 #Javascript
AngularJS中$http服务常用的应用及参数
Aug 22 #Javascript
详解AngularJS如何实现跨域请求
Aug 22 #Javascript
深入浅析JS Function()构造函数
Aug 22 #Javascript
You might like
mysql,mysqli,PDO的各自不同介绍
2012/09/19 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
PHP下打开phpMyAdmin出现403错误的问题解决方法
2013/05/23 PHP
php与flash as3 socket通信传送文件实现代码
2014/08/16 PHP
Symfony页面的基本创建实例详解
2015/01/26 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
使用Jquery实现点击文字后变成文本框且可修改
2013/09/21 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
javascript面向对象特性代码实例
2014/06/12 Javascript
js实现大转盘抽奖游戏实例
2015/06/24 Javascript
vue中接口域名配置为全局变量的实现方法
2018/09/20 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
express框架下使用session的方法
2019/07/31 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
flask + pymysql操作Mysql数据库的实例
2017/11/13 Python
python requests爬取高德地图数据的实例
2018/11/10 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Mistine官方海外旗舰店:泰国国民彩妆品牌
2016/12/28 全球购物
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
本科毕业生的求职信范文
2013/11/20 职场文书
茶叶生产计划书
2014/01/10 职场文书
如何打造一封优秀的留学推荐信
2014/01/25 职场文书
优秀医生事迹材料
2014/02/12 职场文书
学校消防演习方案
2014/02/19 职场文书
企业节能减排实施方案
2014/03/19 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL