在多人协作的前端开发中，或许会遇到一个问题：几个开发人员都给一个元素添加了同样的事件，但是又有开发人员想要解除掉元素身上的某个事件效果，这时候操作起来就有些麻烦，需要用到jquery给我们提供的事件命名空间。说的有点抽象，举个例子先：
比如有一个开发人员写到下面这样的代码：
| 代码如下 | 复制代码 |
| $("#box").on('click',function () { $(this).css('background','#0f0'); }) |
|
还有一个开发人员写成这样：
| 代码如下 | 复制代码 |
| $("#box").on('click',function () { $(this).css('color','#fff'); }) |
|
这时候如果第三个开发人员想要去除掉#box点击时文字变色的事件，他会考虑写下面的代码：
| 代码如下 | 复制代码 |
|
$("#box").off('click'); |
|
然而，这时你却发现，#box身上的click事件都被解绑了，这当然不是我们想要的，我们想要的是把文字变色的事件解绑，而背景变色的事件保留，这时，就要用上jquery给我们提供的事件命名空间。把上面的代码改写成如下：
| 代码如下 | 复制代码 |
|
$("#box").on('click.backgroud',function () { $(this).css('background','#0f0'); }); $("#box").on('click.color',function () { $("#box").off('click.color'); |
|
这样就可以实现上述的请求，而这里添加的background和click就是事件的命名空间，好玩吧，有趣的jquery等着你去探索！
补充:
jquery的事件命名空间，就是为了区分同一个jquery元素绑定的多个同名事件，使用方法就是: $.bind(“事件名.区分后缀”, function)，$.trigger(“事件名.区分后缀”)
| 代码如下 | 复制代码 |
|
$(function(){ $("body").bind('click', function(){ console.info('第一次单击绑定输出'); }); $("body").bind('click', function(){ console.info('第二次单击绑定输出'); }); $("#unbind").click(function(){ $('body').unbind('click'); console.info('解除了body的所有单击事件'); }); }); |
|
以上代码绑定了两次click事件，会同时执行。unbind(‘click’)，就会解除全部的click事件。
如果我只想解除其中之一，而不是解除所有的单击事件，怎么办？答案就是使用命名空间。看以下代码
| 代码如下 | 复制代码 |
|
$(function(){ $("body").bind('click.one', function(){ console.info('第一次单击绑定输出'); }); $("body").bind('click.two', function(){ console.info('第二次单击绑定输出'); }); $("#unbind").click(function(){ $('body').unbind('click.one'); console.info('只解除body的第一次单击事件'); }); $("#unbind-all").click(function(){ $('body').unbind('click'); console.info('解除了body的全部单击事件，包括有命名空间的单击事件'); }); }); 当解 |
|
除click.one时候，click.two事件就被保留了下来。但是unbind(‘click’)会解除所有（无论有没有命名空间）的单击事件。
简单的说： 杀死王小明，那么张小明会活下来。杀死小明，那么代表王小明和张小明都要被干掉。
所以，jquery的事件命名空间就是提供一种途径，让你恰当的对指定事件解除绑定(unbind)或触发(trigger)，而不影响其他已绑定的“同名不同姓”的事件。
在jquery1.2+就已经可以使用命名空间。在jquery1.3+以后，还可以这样绑定：
| 代码如下 | 复制代码 |
|
$('.class').bind('click.a.b', function(){}); $('.class').trigger('click.a'); $('.class').unbind('click.b'); //经测试 click.a.b === click.a === click.b 这样的命名空间有什么用？?澹?菜圃?妹??钟妹???故峭?桓鋈恕?/p> 另外看看这样： $("a").bind("click.one", function) |
|
总结
命名空间方式的一般使用：
| 代码如下 | 复制代码 |
|
$('.class').bind('click.namespace', function(){}); $('.class').trigger('click.namespace'); $('.class').unbind('click.namespace'); 同一个命名空间的事件可以直接用命名空间批量解绑。 $('.class').bind('click.namespace', function(){}); |
|