jQuery1.7开始,jQuery引入了全新的事件绑定机制,jQuery .on() 和 off() 两个函数统一处理事件绑定,也是jQuery触发DOM元素事件的最佳方法。有时候既要trigger手动触发事件,也要从DOM元素上解绑事件,比如:

  1. $('.item').on('click', doThisCoolThing);
  2. $('.item').on('click', doThisOtherCoolThing);
  3. $('.item').trigger('click'); // 两个click事件都触发
  4. $('.item').off('click'); // 两个click事件都解绑

使用事件命名空间我们可以在创建事件的时候指派名称到事件处理器,并在使用trigger()和off()时通过这个名称指定到特定的函数。调用的时候就可以通过使用不同的命名空间灵活的指派事件. 比如:

  1. $('.item').on('click.navigate', doThisCoolThing);
  2. $('.item').on('click.notify', doThisOtherCoolThing);
  3. $('.item').trigger('click.navigate'); // 只有带有navigate这个命名空间的方法才会触发
  4. $('.item').off('click.notify'); // 只有带有notify这个命名空间的方法才会解绑

也可以使用多个命名空间,无论使用哪个名字都会生效,通过命名空间代码规范(产品.模块.事件)让事件的层次更清晰:

  1. $('.item').on('click.navigate.notify', doThisCoolThing);
  2. $('.item').trigger('click.navigate'); // 将触发click事件
  3. $('.item').off('click.notify'); // 将解绑click事件

jQuery .on() and .off() 命名空间的更多相关文章

  1. jQuery的事件绑定命名空间

    jQuery的bind的函数在实际应用中用的不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定.在没有看到这篇文章之前,我一直不知道原来bind也可以有命名空间.事实 ...

  2. 第十七章:jQuery类库

    javascript的核心API设计的很简单,但由于浏览器之间的不兼容性,导致客户端的API过于复杂.IE9的到来缓解了这种情况.然而使用javascript的框架或者工具类库,能简化通用操作,处理浏 ...

  3. jQuery插件开发详细教程

    这篇文章主要介绍了jQuery插件开发详细教程,将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱,需要的朋友可以参考下 扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间. ...

  4. jQuery1.11源码分析(7)-----jQuery一些基本的API

    这篇文章比较繁杂,主要就是把jQuery源码从上到下列出来,看我的注释就好了. jQuery源码对各种加载器做了处理. //阅读这个源码是请先了解一下概念,即时函数,工厂模式 (function( g ...

  5. ExtJS与jQuery的一点细节上的对比

    首先说明这不是一篇完整解读ExtJS和jQuery所有方面差异的文章,只是针对我个人刚看了两天的jQuery产生的一些疑问的整理.之前用过一段时间ExtJS,了解ExtJS的一些机制.现在做移动开发, ...

  6. 2016年11月2日——jQuery源码学习笔记

    1.jQuery()函数,即$().有四种不同的调用方式. (1)传递CSS选择器(字符串)给$()方法,返回当前文档中匹配该选择器的元素集.可选第二个参数,一个元素或jQuery对象,定义元素查询的 ...

  7. (转)跟我一起学JQuery插件开发教程

    在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接.现在我把上面网站的及结合自己的想法写这篇文 ...

  8. jQuery插件开发入门

    扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 入门 编写一个jQuery插件开始于给jQuery.fn加入 ...

  9. 解析jQuery中extend方法--用法《一》

    extend方法在jQuery中是一个很重要的方法,jQuey内部用它来扩展属性方法.常用语jQuery插件开发. jQuery提供了两个方法,$.extend和$.fn.extend,两个方法内部实 ...

随机推荐

  1. can't open file 'manage.py': [Errno 2] No such file or directory

    python Django创建数据库时can't open file 'manage.py': [Errno 2] No such file or directory 参考https://blog.c ...

  2. pthread_cleanup_push()/pthread_cleanup_pop()的详解

    一般来说,Posix的线程终止有两种情况:正常终止和非正常终止.线程主动调用pthread_exit()或者从线程函数中return都将使线程正常退出,这是可预见的退出方式:非正常终止是线程在其他线程 ...

  3. Arcgis api 离线部署

    Arcgis api 离线部署 修改 文件一(init.js)位置:arcgis_js_v317_api\arcgis_js_api\library\3.17\3.17\init.js 将[HOSTN ...

  4. 关于Meta标签的一些知识

    1.定义文档的编码格式(H5的标准写法) <meta charset="UTF-8"> 2.声明指定的浏览器以及版本 <meta http-equiv=" ...

  5. MQTT协议-MQTT协议解析(MQTT数据包结构)

    协议就是通信双方的一个约定,即,表示第1位传输的什么.第2位传输的什么…….在MQTT协议中,一个MQTT数据包由:固定头(Fixed header). 可变头(Variable header). 消 ...

  6. QSS-qt样式表

    QSS即Qt StyleSheet(Qt样式表)的简称,是一种用来自定义控件外观的强大机制,QSS可以让我们的程序界面更加漂亮 每条QSS样式都由两部分组成:1. 选择器,该部分指定要美化的控件  2 ...

  7. luogu P2662 牛场围栏

    传送门 因为一个木板可以切掉最多\(m\),所以可以先预处理哪些长度的木板可用,开个桶,然后对\([l-m,l]\)打标记,再把打了标记的数取出来 假设可用长度\(a_1,a_2,,,a_n\)从小到 ...

  8. Java类的5个加载步骤

    类加载的五个过程分为: 加载 验证 准备 解析 初始化 1 加载 完成三件事: 通过类的全限定名来获取定义此类的二进制字节流 将这个字节流所代表的静态存储结构转化为方法区的运行时数据结构 在内存中生成 ...

  9. vscode 配置Git

    步骤: 下载Git客户端 配置环境变量 设置vscode与Git的关联 重启 步骤一: 该网址,下载即可. https://git-scm.com/downloads 步骤二: 计算机 > 属性 ...

  10. B - Fuzzy Search (FFT)

    题目链接:https://cn.vjudge.net/contest/281959#problem/B 题目大意:给你n,m,k.然后输入两个字符串,n代表第一个字符串s1,m代表第二个字符串s2,然 ...