浅谈jquery事件命名空间

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

时间: 2024-10-14 08:27:49

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

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

浅谈jquery关于select框的取值和赋值 jQuery("#select_id").change(function(){}); // 1.为Select添加事件,当选择其中一项时触发 var checkValue = jQuery("#select_id").val(); // 2.获取Select选中项的Value var checkText = jQuery("#select_id :selected").text(); // 3.获取

浅谈 jQuery 事件源码定位问题

原文:浅谈 jQuery 事件源码定位问题 昨天群里有人问了个事件源码定位的问题,简单描述下是这样的. 在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery)这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点. 在 chrome 的控制台里有个 Event Listeners,这里会显示你所选择元素的事件,如果是原生事件,他会直接显示,你点击一下事件就会跳到对应代码里了,可是 jQuery 绑定的事件却不是这样的,你点击后只会跳到 jQuery

【浅谈DOM事件的优化】

浅谈DOM事件的优化 在 JavaScript程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 Firefox 中,滚轮事件为 DOMMouseScroll). 浏览器为了确保这些事件能够及时响应,触发的频率会比较高,具体的触发频率各浏览器虽然有出入,但出入不大.很多时候在需要注重性能的场景下使用这些事件会想各种办法对事件的触发频率进行优化,下面说说我的一些优化方法. mousemove 在拖拽

浅谈Android 事件分发机制(一)

在上一篇文章中,浅谈Android 事件分发机制(一),简要分析了一下事件分发机制的原理,总结一下就是事件层层传递,直到被消费,原理看似简单,但是在实际使用过程中,场景各不相同,复杂程度也就因产品而异,这篇文章就通过给view加移动来模拟事件分发. 触摸事件 这里涉及到几个与手指触摸相关的常见事件: 坐标系对于单指触控移动来说,一次简单的交互流程是这样的:手指落下(ACTION_DOWN) -> 移动(ACTION_MOVE) -> 离开(ACTION_UP) 坐标系 Android坐标系以手

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

off()函数用于移除元素上绑定的一个或多个事件的事件处理函数. off()函数主要用于解除由on()函数绑定的事件处理函数. 该函数属于jQuery对象(实例). 语法 jQuery 1.7 新增该函数.其主要有以下两种形式的用法: 用法一: jQueryObject.off( [ events [, selector ] [, handler ] ] ) 用法二: jQueryObject.off( eventsMap [, selector ] ) 参数 参数 描述 events 可选/S

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

前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,db

浅谈Qt事件的路由机制:鼠标事件

请注意,本文是探讨文章而不是教程,是根据实验和分析得出的结果,可能是错的,因此欢迎别人来探讨和纠正. 这几天对于Qt的事件较为好奇,平时并不怎么常用,一般都是用信号,对于事件的处理,一般都是需要响应键盘按键事件的时候,也用得毫无问题,因此也没怎么注意过,翻了下一般qt的教材<精通Qt4编程(第二版)>,里面12.1是这么说的. 当用户按下一个鼠标键时,这个事件首先被发给当前拥有焦点的窗口部件. 看到这里,我第一反应是,真的是这样吗,我表示十分地好奇,于是就赶忙试验了一下.代码比较简单,没有注释

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

一.on(),live(),bind() on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数.使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素). live() 向当前或未来的匹配元素添加一个或多个事件处理器: bind() 向匹配元素添加一个或多个事件处理器.(不能用于当前不存在的元素) 使用方式(三种均相同) $(selector).on(event,childselector,data,function) event:必需项

浅谈JQuery

一.什么是JQuery? JQuery是第三方开发的执行DOM操作的极简化的函数库. 执行DOM操作:JQuery还是在执行DOM操作 1.学习JQuery还是在学习DOM 2.五件事:增删改查 事件绑定 极简化:JQuery是对DOM中每步操作都进行了终极的简化.但是,做事儿的步骤,并没有简化! 函数库:JQuery中一切都是用函数来解决问题,没有属性. 元素.属性  方法<==>函数   元素.方法名() 为什么:2个原因: 1.简单! 2.解决了大部分浏览器兼容性问题:凡是JQuery让