浅谈jquery事件命名空间

时间：2021-02-28 20:37:47

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

　　先看如下简单代码：

 $("#btn").on("click.name1.name2",function(){

    console.log(1);

 })

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

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

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

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

  $("#btn").off(".name1");

  $("#btn").off(".name2");

  $("#btn").off(".name1.name2");

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

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

  $("#btn").off("click.name1.name2");

  $("#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也可以绑定和解绑自定义事件，而且自定义事件也可以有命名空间。

相关文章