实例讲解jQuery中对事件的命名空间的运用


Posted in Javascript onMay 24, 2016

用 jQuery 绑定和解绑事件监听器都是非常简单的。但是当你为一个元素的一个事件绑定了多个监听器时,怎样精确地解绑其中一个监听器?我们需要了解一下事件的命名空间。

看下面这段代码:

$(“#element”)
  .on(“click”, doSomething)
  .on(“click”, doSomethingElse);

像上面这样绑定事件监听器,当元素被点击时,doSomething 和 doSomethingElse 这两个监听器都会被触发。这是使用 jQuery 的一个便利之处,可以随时给元素的同一个事件添加不同的监听器。不像用 onclick 那样,新的监听器会覆盖旧的。

如果你想解绑其中一个监听器,比如 doSomething,怎么做呢?

是这样吗?

$(“#element”).off(“click”);

注意!上面这行代码会把元素的 click 事件的所有监听器全部解绑,而这并不是我们要的结果。

幸运的是 jQuery 的 .off() 方法可以接受第二个参数,就像 .on() 一样。只要把监听器函数的名字作为第二个参数传入 .off() 方法,就能够解绑指定的监听器。

$(“#element”).off(“click”, doSomething);

但是如果你不知道这个函数的名字,或者你用的是匿名函数:

$(“#element”)
  .on(“click”, function() {
    console.log(“doSomething”);
  });

怎样才能精确地解绑某一个 click 事件监听器呢?该了解一下 jQuery 的事件命名空间了!

先上代码:

$(“#element”)
  .on(“click.myNamespace”, function() {
    console.log(“doSomething”);
  });

这里不只是把 click 事件作为参数传入 .on() 方法,而是给 click 事件指定了一个命名空间,然后监听了这个命名空间里的 click 事件。此时,即使监听器是匿名函数,实际上它也是“有名”的了。现在你可以像下面这样解绑某一个具体的命名空间里的事件监听器了。

$(“#element”).off(“click.myNamespace”);

这是 jQuery 为我们提供的又一个方便而强大的功能,它的内部实现肯定很有意思!

我们再来看一些代码:

$(“#haorooms”).on("click.a",function(){});
$(“#haorooms”).on("click.a.bb",function(){});
$(“#haorooms”).on("dbclick.a",function(){});
$(“#haorooms”).on("mouseover.a",function(){});
$(“#haorooms”).on("mouseout.a",function(){});

当然,我们也可以用bind进行事件绑定。我们看到上面的代码,我们可以在事件后面,以点号,加我们的名字,就是事件命名空间。所谓事件命名空间,就是事件类型后面以点语法附加一个别名,以便引用事件,如”click.a”,其中”a”就是click当前事件类型的别名,即事件命名空间。

假如我们要删除如下命名空间:

$(“#haorooms”).on("click.a.bb",function(){});

我们可以用:

$(“#haorooms”).off("click.a.bb");//直接删除bb命名空间 【推荐】
$(“#haorooms”).off(".bb"); //直接删除bb命名空间 【推荐】
$(“#haorooms”).off(".a"); //删除.a命名空间下面所有的子空间【包括.a.bb  .a.cc等等,.a是.bb的父级,因此.a下面的都会删掉】
$(“#haorooms”).off("click");//直接解绑click,下面的命名空间都会删除。

要注意的是:

假如我们写了如下代码:

$(“#haorooms”).on("click",function(){});
$(“#haorooms”).on("click.a",function(){});
$(“#haorooms”).on("click.a.bb",function(){});

那么我们要用trigger触发click事件,也就是触发第一个,岂不是把click.a和click.a.bb都触发了,那如何解决这个问题呢,我只想触发click,而不触发click.a及以下的命名空间?

没关系! 有如下解决办法:

如果事件类型后面附加感叹号,则表示触发不包含命名空间的特定事件类型。

假如我们只想触发click,可以这么写:

$(“#haorooms”).trigger("click!")

只触发bb,可以这么写:

$(“#haorooms”).trigger("click.a.bb");

有了命名空间,可以方便我们在同一个事件上面做管理啦!!!

Javascript 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
js实现键盘Enter键提交表单的方法
May 27 Javascript
Javascript实现获取及设置光标位置的方法
Jul 21 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
node操作mysql数据库实例详解
Mar 17 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
JavaScript实现京东放大镜效果
Dec 03 Javascript
vue中实现图片压缩 file文件的方法
May 28 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
json传值以及ajax接收详解
May 24 #Javascript
JS获取屏幕高度的简单实现代码
May 24 #Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 #Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 #Javascript
jQuery获取及设置表单input各种类型值的方法小结
May 24 #Javascript
jQuery+php实时获取及响应文本框输入内容的方法
May 24 #Javascript
jQuery中事件与动画的总结分享
May 24 #Javascript
You might like
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
cache_lite试用
2007/02/14 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
浅谈PHP接入(第三方登录)QQ登录 OAuth2.0 过程中遇到的坑
2017/10/13 PHP
php给数组赋值的实例方法
2019/09/26 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
Select标签下拉列表二级联动级联实例代码
2014/02/07 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
JS实现超简单的鼠标拖动效果
2015/11/02 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
2017/03/02 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
vue中的ref和$refs的使用
2018/11/22 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
详解Vue依赖收集引发的问题
2019/04/22 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
node读写Excel操作实例分析
2019/11/06 Javascript
Python 类的继承实例详解
2017/03/25 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python2实现的图片文本识别功能详解
2018/07/11 Python
基于python traceback实现异常的获取与处理
2019/12/13 Python
python实现局域网内实时通信代码
2019/12/22 Python
tensorflow:指定gpu 限制使用量百分比,设置最小使用量的实现
2020/02/06 Python
python实现滑雪者小游戏
2020/02/22 Python
基于html和CSS3制作酷炫的导航栏
2015/09/23 HTML / CSS
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
浙大毕业生自荐信
2014/01/26 职场文书
单位工作证明范文
2014/09/14 职场文书
《小摄影师》教学反思
2016/02/18 职场文书
JavaScript原型链详解
2021/11/07 Javascript
Pygame如何使用精灵和碰撞检测
2021/11/17 Python
SQL语句中EXISTS的详细用法大全
2022/06/25 MySQL