什么是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. python中对文件和文件夹的操作

    一.说明 python中主要通过os模块和shutil模块两个模块对文件进行相关操作,移动.复制.删除.重命名.比较大的文件通过命令操作可以节省时间,提高效率. 二.实例对文件夹中文件的拷贝 from ...

  2. ckeditor文本对齐方式添加,图片上传

    最近用的AdminBSBMaterialDesign-master模板,里边用到了ckeditor编辑器 但发现里边没有基本的文本对齐方式,找了好一会,好多方法都不管用,最后在config.js中添加 ...

  3. IPFS扫盲

    第二届深圳区块链技术与应用大会暨展览会,深圳区块链存储与IPFS技术应用大会暨展览会于2019年4月9日在深圳会展中心6号馆举行.那么这个IPFS是什么?和区块链有什么关系?有什么用?又怎么用呢?接下 ...

  4. nginx 实现所有的子域名301跳转到另外一个域名的对应子域名

    server { listen ; server_name *.olddomain.com; if ( $http_host ~* "^(.*?)\.olddomain\.com$" ...

  5. 跟随我在oracle学习php(14)

    CSS3的@keyframes用法详解: 此属性与animation属性是密切相关的,关于animation属性可以参阅CSS3的animation属性用法详解一章节. 一.基本知识: keyfram ...

  6. java web中验证码生成的demo

    首先创建一个CaptailCode类 package com.xiaoqiang.code; import java.awt.*; import java.awt.font.FontRenderCon ...

  7. webpack 简单配置

    webpack.config.js const path = require('path'); const HtmlWebpackPlugin=require('html-webpack-plugin ...

  8. javeEE第一周

    1.我对javaEE这一门课的要求和想要达到的一个效果: 我对javaEE还是比较感兴趣的,大家也知道我是一个懂安全的PHPER,也有一些项目经验,我发现PHP做的web开发试用的场合主要是一些中小型 ...

  9. 作业:K-means算法应用:图片压缩

    from sklearn.datasets import load_sample_image from sklearn.cluster import KMeans import matplotlib. ...

  10. spring cloud 随笔记录(1)-

    最近随着微服务的火热,我也开始对我服务进行了解了  毕竟程序员这一行需要及时更新自己的技能,才能更好的生存. 我理解的微服务  项目由多个独立运行的程序组成,每个服务运行在自己的进程中,服务间采用轻量 ...