什么是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也可以绑定和解绑自定义事件,而且自定义事件也可以有命名空间。

浅谈jquery事件命名空间的更多相关文章

  1. 浅谈jquery关于select框的取值和赋值

    浅谈jquery关于select框的取值和赋值   jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...

  2. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

  3. 浅谈jQuery中的Ajax

    浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...

  4. 车大棒浅谈jQuery源码(二)

    前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...

  5. jQuery事件命名空间

    先看一些代码: 也可以用bind进行事件绑定.我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间.所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如& ...

  6. 浅谈jquery之on()绑定事件和off()解除绑定事件

    off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...

  7. 浅谈 jQuery 事件源码定位问题

    该方法已过期,chrome 48还是49开始,自带各种流行框架的事件绑定解析. 勾上这个选项即可. 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到 ...

  8. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  9. 浅谈JS事件冒泡

    今天要跟大家谈的是事件冒泡,这个事件呢,也是两面性的,有时候给我们带来bug,有时候优点也很明显.我们就一起来看看它的真面目.  首先看看事件冒泡是什么? 事件冒泡 :当一个元素接收到事件的时候 会把 ...

随机推荐

  1. EF开发中EntityFramework在web.config中的配置问题

    异常: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架提供程序.请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序 ...

  2. python面试题总结(1)

    1.python常用的数据类型. int.float.str.set.list.dict.tuple.frozenset.bool.None. 2.docstring是什么? Docstring是一种 ...

  3. Fortran与C/C++混合编程示例

    以下例子均来自网络,只是稍作了编辑,方便今后查阅. 子目录 (一) Fortran调用C语言 (二) C语言调用Fortran (三) C++ 调用Fortran (四) Fortran 调用 C++ ...

  4. linux常用命令 cut字符截取命令

    cut 字符截取 cut [选项] 文件名 选项 -f 列号: 提取第几列 -d 分割符:按照指定的分隔符分割列 默认使用制表符("tab")进行分割 ssgao:Download ...

  5. Angular2+URL中的 # 引发的思考

    1.先分析 # 的作用 1.1. # 的涵义 #代表网页中的位置.其右面的字符就是该位置的标识符.比如,http://www.example.com/index.html#print就代表网页inde ...

  6. 跟随我在oracle学习php(10)

    正则表达式 做验证 做匹配 用符号来描述书写规则:/ 中间写正则表达式 /^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾\d:一个任意的数字\w:一个任意的数字或字母\ ...

  7. 【webpack学习笔记】a02-管理资源

    在webpack 中,各种资源要引入,要用到module配置,比如css/图片/字体等等. 例如: module.exports = { entry: './src/app.js', //这是入口文件 ...

  8. idea安装proto插件后不能识别.proto文件解决方案

     just had a try and it worked well. Could you please check "File Types" in IDEA? Open &quo ...

  9. Django基础-01

    Django 是基于 Python,所有的 Django 代码都是用Python写成的. Django 特点 强大的数据库功能 拥有强大的数据库操作接口(QuerySet API),如需要也能执行原生 ...

  10. Python随笔--继承