A-A+

jquery的事件命名空间简单介绍

2016年01月07日 前端设计 暂无评论 阅读 4 views 次

下面本文章就为各位总结一些关于jquery的事件命名空间的一些细节,希望本文章能对各位理解事件命名空间带来帮助哦。

在多人协作的前端开发中,或许会遇到一个问题:几个开发人员都给一个元素添加了同样的事件,但是又有开发人员想要解除掉元素身上的某个事件效果,这时候操作起来就有些麻烦,需要用到jquery给我们提供的事件命名空间。说的有点抽象,举个例子先:

比如有一个开发人员写到下面这样的代码:

  1. $("#box").on('click',function () {  
  2.     $(this).css('background','#0f0');  
  3. })  

还有一个开发人员写成这样,代码如下:

  1. $("#box").on('click',function () {  
  2.     $(this).css('color','#fff');  
  3. })  

这时候如果第三个开发人员想要去除掉#box点击时文字变色的事件,他会考虑写下面的代码:

  1. $("#box").off('click');  

然而,这时你却发现,#box身上的click事件都被解绑了,这当然不是我们想要的,我们想要的是把文字变色的事件解绑,而背景变色的事件保留,这时,就要用上jquery给我们提供的事件命名空间。把上面的代码改写成如下:

  1. $("#box").on('click.backgroud',function () {  
  2.  $(this).css('background','#0f0');  
  3. });  
  4. $("#box").on('click.color',function () {  
  5.  $(this).css('color','#fff');  
  6. });  
  7. $("#box").off('click.color');  

这样就可以实现上述的请求,而这里添加的background和click就是事件的命名空间,好玩吧,有趣的jquery等着你去探索!

补充:jquery的事件命名空间,就是为了区分同一个jquery元素绑定的多个同名事件,使用方法就是: $.bind(“事件名.区分后缀”, function),$.trigger(“事件名.区分后缀”),代码如下:

  1. $(function(){  
  2.     $("body").bind('click', function(){  
  3.         console.info('第一次单击绑定输出');  
  4.     });  
  5.     $("body").bind('click', function(){  
  6.         console.info('第二次单击绑定输出');  
  7.     });  
  8.     $("#unbind").click(function(){  
  9.         $('body').unbind('click');  
  10.         console.info('解除了body的所有单击事件');  
  11.     });  
  12. });  

以上代码绑定了两次click事件,会同时执行。unbind(‘click’),就会解除全部的click事件,如果我只想解除其中之一,而不是解除所有的单击事件,怎么办?答案就是使用命名空间,看以下代码:

  1. $(function(){  
  2.     $("body").bind('click.one', function(){  
  3.         console.info('第一次单击绑定输出');  
  4.     });  
  5.     $("body").bind('click.two', function(){  
  6.         console.info('第二次单击绑定输出');  
  7.     });  
  8.     $("#unbind").click(function(){  
  9.         $('body').unbind('click.one');  
  10.         console.info('只解除body的第一次单击事件');  
  11.     });  
  12.     $("#unbind-all").click(function(){  
  13.         $('body').unbind('click');  
  14.         console.info('解除了body的全部单击事件,包括有命名空间的单击事件');  
  15.     });  
  16. });  

当解除click.one时候,click.two事件就被保留了下来。但是unbind(‘click’)会解除所有(无论有没有命名空间)的单击事件。

简单的说:杀死王小明,那么张小明会活下来。杀死小明,那么代表王小明和张小明都要被干掉。

所以,jquery的事件命名空间就是提供一种途径,让你恰当的对指定事件解除绑定(unbind)或触发(trigger),而不影响其他已绑定的“同名不同姓”的事件。

在jquery1.2+就已经可以使用命名空间。在jquery1.3+以后,还可以这样绑定,代码如下:

  1. $('.class').bind('click.a.b', function(){});  
  2. $('.class').trigger('click.a');  
  3. $('.class').unbind('click.b');  
  4. //经测试 click.a.b === click.a === click.b 这样的命名空间有什么用??</p>  

另外看看这样:

  1. $("a").bind("click.one"function)  
  2. $("a").bind("mouseover.one"function)  
  3. $("a").unbind(".one"); //结果会怎样呢?  

总结:命名空间方式的一般使用,代码如下:

  1. $('.class').bind('click.namespace', function(){});   
  2. $('.class').trigger('click.namespace');  
  3. $('.class').unbind('click.namespace');  

同一个命名空间的事件可以直接用命名空间批量解绑。

  1. $('.class').bind('click.namespace', function(){});  
  2. $('.class').bind('blur.namespace', function(){});  
  3. $('.class').unbind('.namespace');  
标签:

给我留言