实例讲解jQuery中对事件的命名空间的运用
用jQuery绑定和解绑事件监听器都是非常简单的。但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间。
看下面这段代码:
$(“#element”) .on(“click”,doSomething) .on(“click”,doSomethingElse);
像上面这样绑定事件监听器,当元素被点击时,doSomething和doSomethingElse这两个监听器都会被触发。这是使用jQuery的一个便利之处,可以随时给元素的同一个事件添加不同的监听器。不像用onclick那样,新的监听器会覆盖旧的。
如果你想解绑其中一个监听器,比如doSomething,怎么做呢?
是这样吗?
$(“#element”).off(“click”);
注意!上面这行代码会把元素的click事件的所有监听器全部解绑,而这并不是我们要的结果。
幸运的是jQuery的.off()方法可以接受第二个参数,就像.on()一样。只要把监听器函数的名字作为第二个参数传入.off()方法,就能够解绑指定的监听器。
$(“#element”).off(“click”,doSomething);
但是如果你不知道这个函数的名字,或者你用的是匿名函数:
$(“#element”) .on(“click”,function(){ console.log(“doSomething”); });
怎样才能精确地解绑某一个click事件监听器呢?该了解一下jQuery的事件命名空间了!
先上代码:
$(“#element”) .on(“click.myNamespace”,function(){ console.log(“doSomething”); });
这里不只是把click事件作为参数传入.on()方法,而是给click事件指定了一个命名空间,然后监听了这个命名空间里的click事件。此时,即使监听器是匿名函数,实际上它也是“有名”的了。现在你可以像下面这样解绑某一个具体的命名空间里的事件监听器了。
$(“#element”).off(“click.myNamespace”);
这是jQuery为我们提供的又一个方便而强大的功能,它的内部实现肯定很有意思!
我们再来看一些代码:
$(“#haorooms”).on("click.a",function(){}); $(“#haorooms”).on("click.a.bb",function(){}); $(“#haorooms”).on("dbclick.a",function(){}); $(“#haorooms”).on("mouseover.a",function(){}); $(“#haorooms”).on("mouseout.a",function(){});
当然,我们也可以用bind进行事件绑定。我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间。所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。
假如我们要删除如下命名空间:
$(“#haorooms”).on("click.a.bb",function(){});
我们可以用:
$(“#haorooms”).off("click.a.bb");//直接删除bb命名空间【推荐】 $(“#haorooms”).off(".bb");//直接删除bb命名空间【推荐】 $(“#haorooms”).off(".a");//删除.a命名空间下面所有的子空间【包括.a.bb.a.cc等等,.a是.bb的父级,因此.a下面的都会删掉】 $(“#haorooms”).off("click");//直接解绑click,下面的命名空间都会删除。
要注意的是:
假如我们写了如下代码:
$(“#haorooms”).on("click",function(){}); $(“#haorooms”).on("click.a",function(){}); $(“#haorooms”).on("click.a.bb",function(){});
那么我们要用trigger触发click事件,也就是触发第一个,岂不是把click.a和click.a.bb都触发了,那如何解决这个问题呢,我只想触发click,而不触发click.a及以下的命名空间?
没关系!有如下解决办法:
如果事件类型后面附加感叹号,则表示触发不包含命名空间的特定事件类型。
假如我们只想触发click,可以这么写:
$(“#haorooms”).trigger("click!")
只触发bb,可以这么写:
$(“#haorooms”).trigger("click.a.bb");
有了命名空间,可以方便我们在同一个事件上面做管理啦!!!