浅谈jquery事件命名空间
什么是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事件命名空间的更多相关文章
- 浅谈jquery关于select框的取值和赋值
浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其 ...
- jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间
http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...
- 浅谈jQuery中的Ajax
浅谈jQuery中的Ajax 一.前言 jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post ...
- 车大棒浅谈jQuery源码(二)
前言 本来只是一个自己学习jQuery笔记的简单分享,没想到获得这么多人赏识.我自己也是傻呵呵的一脸迷茫,感觉到受宠若惊. 不过还是有人向批判我的文章说,这是基本知识点,完全跟jQuery源码沾不上边 ...
- jQuery事件命名空间
先看一些代码: 也可以用bind进行事件绑定.我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间.所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如& ...
- 浅谈jquery之on()绑定事件和off()解除绑定事件
off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该 ...
- 浅谈 jQuery 事件源码定位问题
该方法已过期,chrome 48还是49开始,自带各种流行框架的事件绑定解析. 勾上这个选项即可. 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到 ...
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
- 浅谈JS事件冒泡
今天要跟大家谈的是事件冒泡,这个事件呢,也是两面性的,有时候给我们带来bug,有时候优点也很明显.我们就一起来看看它的真面目. 首先看看事件冒泡是什么? 事件冒泡 :当一个元素接收到事件的时候 会把 ...
随机推荐
- EF开发中EntityFramework在web.config中的配置问题
异常: 未找到具有固定名称“System.Data.SqlClient”的 ADO.NET 提供程序的实体框架提供程序.请确保在应用程序配置文件的“entityFramework”节中注册了该提供程序 ...
- python面试题总结(1)
1.python常用的数据类型. int.float.str.set.list.dict.tuple.frozenset.bool.None. 2.docstring是什么? Docstring是一种 ...
- Fortran与C/C++混合编程示例
以下例子均来自网络,只是稍作了编辑,方便今后查阅. 子目录 (一) Fortran调用C语言 (二) C语言调用Fortran (三) C++ 调用Fortran (四) Fortran 调用 C++ ...
- linux常用命令 cut字符截取命令
cut 字符截取 cut [选项] 文件名 选项 -f 列号: 提取第几列 -d 分割符:按照指定的分隔符分割列 默认使用制表符("tab")进行分割 ssgao:Download ...
- Angular2+URL中的 # 引发的思考
1.先分析 # 的作用 1.1. # 的涵义 #代表网页中的位置.其右面的字符就是该位置的标识符.比如,http://www.example.com/index.html#print就代表网页inde ...
- 跟随我在oracle学习php(10)
正则表达式 做验证 做匹配 用符号来描述书写规则:/ 中间写正则表达式 /^ :匹配开头,$:匹配结尾 : /^ve/以ve开头的 /ve$/以ve结尾\d:一个任意的数字\w:一个任意的数字或字母\ ...
- 【webpack学习笔记】a02-管理资源
在webpack 中,各种资源要引入,要用到module配置,比如css/图片/字体等等. 例如: module.exports = { entry: './src/app.js', //这是入口文件 ...
- idea安装proto插件后不能识别.proto文件解决方案
just had a try and it worked well. Could you please check "File Types" in IDEA? Open &quo ...
- Django基础-01
Django 是基于 Python,所有的 Django 代码都是用Python写成的. Django 特点 强大的数据库功能 拥有强大的数据库操作接口(QuerySet API),如需要也能执行原生 ...
- Python随笔--继承