jquery的事件命名空间简单介绍
下面本文章就为各位总结一些关于jquery的事件命名空间的一些细节,希望本文章能对各位理解事件命名空间带来帮助哦。
在多人协作的前端开发中,或许会遇到一个问题:几个开发人员都给一个元素添加了同样的事件,但是又有开发人员想要解除掉元素身上的某个事件效果,这时候操作起来就有些麻烦,需要用到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 () {
- $(this).css('color','#fff');
- });
- $("#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)
- $("a").bind("mouseover.one", function)
- $("a").unbind(".one"); //结果会怎样呢?
总结:命名空间方式的一般使用,代码如下:
- $('.class').bind('click.namespace', function(){});
- $('.class').trigger('click.namespace');
- $('.class').unbind('click.namespace');
同一个命名空间的事件可以直接用命名空间批量解绑。
- $('.class').bind('click.namespace', function(){});
- $('.class').bind('blur.namespace', function(){});
- $('.class').unbind('.namespace');