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 相关文章推荐
学习YUI.Ext 第七天--关于View&JSONView
Mar 10 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
Sep 29 Javascript
通过实例理解javascript中没有函数重载的概念
Jun 03 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
深入浅出 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
php mssql 数据库分页SQL语句
2008/12/16 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
2014/01/31 PHP
Ajax PHP JavaScript MySQL实现简易无刷新在线聊天室
2016/08/17 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
js中widow.open()方法使用详解
2013/07/30 Javascript
ie下$.getJSON出现问题的解决方法
2014/02/12 Javascript
jQuery实现的原图对比窗帘效果
2014/06/15 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
js阻止事件追加的具体实现
2014/10/15 Javascript
node.js中的fs.unlink方法使用说明
2014/12/15 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
信息页文内画中画广告js实现代码(文中加载广告方式)
2016/01/03 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
2016/05/10 Javascript
javascript判断firebug是否开启的方法
2016/11/23 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
2017/01/04 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
Vue Object.defineProperty及ProxyVue实现双向数据绑定
2020/09/02 Javascript
10款最好的Web开发的 Python 框架
2015/03/18 Python
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
python对接ihuyi实现短信验证码发送
2020/05/10 Python
python批量生成身份证号到Excel的两种方法实例
2021/01/14 Python
香港个人化生活购物网站:Ballyhoo Limited
2016/09/10 全球购物
公司业务员岗位职责
2014/03/18 职场文书
调解协议书
2014/04/16 职场文书
单位证明范文
2015/06/18 职场文书
研讨会致辞
2015/07/31 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers