浅谈jquery事件命名空间

Posted 2020-10-05

什么是jquery的事件命名空间？

　　先看如下简单代码：

 $("#btn").on("click.name1.name2",function(){
    console.log(1); 
 })

　　其中name1、name2即为所绑定click事件的命名空间，在这里命名空间在事件名后面用“.”来连接。在这里也可以把命名空间理解为别名，即这里绑定的click事件有两个别名name1和name2。

绑定具有命名空间的事件如何解除绑定？

　　如下8种写法均可取消绑定之前绑定的click.name1.name2这一带命名空间的click事件：

1  $("#btn").off("click");
2  $("#btn").off(".name1");
3  $("#btn").off(".name2");
4  $("#btn").off(".name1.name2");
5  $("#btn").off("click.name1");
6  $("#btn").off("click.name2");
7  $("#btn").off("click.name1.name2");
8  $("#btn").off("click.name2.name1");
9　$("#btn").off(".name2.name1");

1会取消绑定所有click事件（包括带任意命名空间的）；

2会取消绑定命名空间中包括name1的所有事件（不仅仅click事件）；

3会取消绑定命名空间中包括name2的所有事件（不仅仅click事件）；

4会取消绑定命名空间中包括name1和name2的所有事件（不仅仅click事件）；

5会取消绑定命名空间中包括name1的click事件；

6会取消绑定命名空间中包括name2的click事件；

7、8会取消绑定命名空间中包括name1和name2的click事件（name1和name2两个命名空间是平级的，并不是父级和子级的关系）；

9会取消绑定命名空间中包括name1和name2的所有事件（不仅仅click事件）；

　　综合这几条可以发现命名空间之于jquery事件类似类名之于标签，这样就很好记忆。如果只想解绑不带命名空间的click事件呢？其实很简单：

$("#btn").off("click!");

　　解绑时候在事件名后加上“!”即可，这样带有命名空间的事件不会受影响。

PS

　　jQuery也可以绑定和解绑自定义事件，而且自定义事件也可以有命名空间。