广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >jQuery中绑定事件的命名空间详解
  • 867
分享到

jQuery中绑定事件的命名空间详解

jQuery绑定事件 2022-11-21 22:11:29 867人浏览 安东尼
摘要

在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深

在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深究,或许他认为命名空间这玩意很简单,没有必要多解释?

先看手册,由于bind方法有三个参数(type,[data],fn),所以手册上这么介绍:

.bind() 方法是用于往文档上附加行为的主要方式。所有javascript事件对象, 比如focus, mouseover, 和 resize,都是可以作为type参数传递进来的。

Jquery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简 化.bind('click')。一共有以下这 些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

任何作为type参数的字符串都是合法的;如果一个字符串不是原生的JavaScript事件名, 那么这个事件处理函数会绑定到一个自定义事件上。这些自定义事件绝对不会由浏览器触发,但可以通过使用.trigger()或 者.triggerHandler()在其他代码中手动触发。

如果type参数的字符串中包含一个点(.)字符, 那么这个事件就看做是有命名空间的了。这个点字符就用来分隔事件和他的命名空间。举例来说,如果执 行 .bind('click.name', handler) ,那么字符串中的 click 是事件类型,而字符串 name 就是命名空间。命名空 间允许我们取消绑定或者触发一些特定类型的事件,而不用触发别的事件。参考unbind()来获取更多信息。

当一个事件传到一个元素上,所有绑定在上面的针对哪个事件的处理函数都会触发。如果注册了多个事件 处理函数,总是按照绑定的顺序依次触发。当所有绑定的事件处理函数执行完毕后,事件继续沿着普通的事件冒泡途径上浮。



jQuery的 bind / unbind 方法应该说使用很简单,而且大多数时候 可能并不会用到,取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。

但假设如下情况:需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定,因而理论 上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有 可能的额外的同一事件绑定逻辑。

这时候如果直接用 .click() / .bind('click') 加 上 .unbind('click') 来进行重复绑定的话,被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑,潜在会影响到该元素 其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话,可以在unbind的时候提供 function作为第二个参数来指 定只unbind其中一个处理逻辑,但实际应用中很可能会碰到各种进行匿名函数绑定的情况。

对于这种问题,jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添 加 .something 来区分自己这部分行为逻辑范围。

比如 用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件(你 可以用自己的命名空间多次绑定不同的行为方法上去),当unbind的时候用 .unbind('click.myCustomRoutine') 即可 释放所有绑定到 .myCustomRoutine 命名空间的 click 事件,而不会解除其他通过 .bind('click') 或另外的命名 空间所绑定的事件行为。

同时,使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定,通 过 .unbind('.myCustomRoutine') 即可。

要注意的是,jQuery的命名空间并不支持多级空间。因为在jQuery里面,如果 用 .unbind('click.myCustomRoutine.myCustomSubone') ,解除的是命名空间分别 为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件,而不 是 "myCustomRoutine 下的 myCustomSubone 子空间"。

jQuery的 bind / unbind 方法应该说使用很简单,而且大多数时候可能并不会用到,取而代之的是直接用 click / keydown 之类的事件名风格的方法来做事件绑定操作。

但假设如下情况:需要在运行时根据用户交互的结果进行不同click事件处理逻辑的绑定,因而理论上会无数次对某一个事件进行 bind / unbind 操作。但又希望 unbind 的时候只把自己绑上去的处理逻辑给释放掉而不是所有其他地方有可能的额外的同一事件绑定逻辑。

这时候如果直接用 .click() / .bind('click') 加上 .unbind('click') 来进行重复绑定的话,被 unbind 掉的将是所有绑定在元素上的 click 处理逻辑,潜在会影响到该元素其他第三方的行为。当然如果在bind的时候是显示定义了function变量的话,可以在unbind的时候提供function作为第二个参数来指定只unbind其中一个处理逻辑,但实际应用中很可能会碰到各种进行匿名函数绑定的情况。

对于这种问题,jQuery的解决方案是使用事件绑定的命名空间。即在事件名称后添加 .something 来区分自己这部分行为逻辑范围。

比如用 .bind('click.myCustomRoutine',function(){...}); 同样是把匿名函数绑定到 click 事件(你可以用自己的命名空间多次绑定不同的行为方法上去),当unbind的时候用 .unbind('click.myCustomRoutine') 即可释放所有绑定到 .myCustomRoutine 命名空间的 click 事件,而不会解除其他通过 .bind('click') 或另外的命名空间所绑定的事件行为。

同时,使用命令空间还可以让你一次性 unbind 所有此命名空间下的自定义事件绑定,通过 .unbind('.myCustomRoutine') 即可。

要注意的是,jQuery的命名空间并不支持多级空间。因为在jQuery里面,如果用 .unbind('click.myCustomRoutine.myCustomSubone') ,解除的是命名空间分别为 myCustomRoutine 和 myCustomSubone 的两个并列命名空间下的所有 click 事件,而不是 "myCustomRoutine 下的 myCustomSubone 子空间"。

--结束END--

本文标题: jQuery中绑定事件的命名空间详解

本文链接: https://www.lsjlt.com/news/173208.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery中绑定事件的命名空间详解
    在没有看到这篇 文章之前,我一直不知道原来bind也可以有命名空间。事实上,我看完这篇文章后,再去翻了一下手册,也才发现了一点点的注释。但手册也仅仅是一句话就带 过去了。没有过多的深...
    99+
    2022-11-21
    jQuery 绑定事件
  • jQuery中on绑定的事件怎么解绑
    这篇文章主要介绍了jQuery中on绑定的事件怎么解绑的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery中on绑定的事件怎么解绑文章都会有所收获,下面我们一起来看看吧。解绑单个事件在jQuery中,我们...
    99+
    2023-07-05
  • 详解PHP中的命名空间
    命名空间其实早在PHP5.3就已经出现了。不过大部分同学可能在各种框架的使用中才会接触到命名空间的内容,当然,现代化的开发也都离不开这些能够快速产出的框架。这次我们不从框架的角度,仅...
    99+
    2022-11-12
  • C++的命名空间详解
    目录C++ | C++命名空间C++命名空间定义命名空间实例1:using 指令实例2:实例3:不连续的命名空间嵌套的命名空间实例4:实例5:笔记:实例6:实例7:总结C++ | C...
    99+
    2022-11-12
  • 【C++】命名空间 namespace 与 标准流 iostream ( 命名空间概念简介 | 命名空间定义 | 命名空间使用 | iostream 中的命名空间分析 )
    文章目录 一、命名空间 namespace1、命名空间基本概念2、名称概念4、C 语言的命名空间3、命名空间避免标识符冲突 二、命名空间定义1、命名空间基本概念2、命名空间定义语法3、代码示例 - 命名空间定义使用 三、命名...
    99+
    2023-08-20
    c++ namespace iostream 命名空间 标准流 原力计划
  • jquery中如何对事件进行绑定和解绑
    小编给大家分享一下jquery中如何对事件进行绑定和解绑,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!jQuery事件绑定和解绑...
    99+
    2022-10-19
  • jQuery中事件多次绑定与解绑的示例分析
    这篇文章主要为大家展示了“jQuery中事件多次绑定与解绑的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“jQuery中事件多次绑定与解绑的示例分析”这...
    99+
    2022-10-19
  • 阿里云服务器域名绑定空间大小详解
    阿里云服务器是阿里集团提供的一种云计算服务,它提供了一种高效、灵活的计算能力,能够帮助企业和个人快速地构建和扩展应用。在使用阿里云服务器时,我们经常需要将域名绑定到服务器上,以便用户可以通过域名访问服务器上的服务。同时,我们还需要考虑服务器...
    99+
    2023-11-01
    阿里 绑定 详解
  • React事件绑定的方式详解
    一、是什么 在react应用中,事件名都是用小驼峰格式进行书写,例如onclick要改写成onClick 最简单的事件绑定如下: class ShowAlert extends...
    99+
    2022-11-12
  • 详解Python 中的命名空间、变量和范围
    目录Python 中的命名空间、变量和范围什么是命名空间?变量和表达式变量范围Python 中的命名空间、变量和范围 什么是命名空间? 首先,我们需要感知python中的名称(标识符...
    99+
    2022-11-11
  • 示例详解C++语言中的命名空间 (namespace)
    目录前言1. 命名空间 2. using 指令 3. 不连续的命名空间 4. 嵌套的命名空间 5. 命名空间内变量、函数、全局变量的作用域5.1 using namespace fi...
    99+
    2022-11-12
  • C++中的命名空间详细介绍
    目录命名空间的特性声明命名空间和命名空间成员全局命名空间不连续命名空间嵌套命名空间using声明和using编译指令命名空间别名综合代码示例总结命名空间的特性 首先熟悉一下命名空间的...
    99+
    2022-11-13
  • jQuery中的事件详解
    目录一、概述:二、绑定事件处理器1、.on():2、.one():3、.off():4、.trigger():5、.triggerHandler():6、jQuery.proxy()...
    99+
    2022-11-13
  • jquery中绑定事件的异同和优缺点
    本篇内容介绍了“jquery中绑定事件的异同和优缺点”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!谈论jq...
    99+
    2022-10-19
  • Vue中的事件绑定与解绑方式
    目录事件绑定基础知识使用场景注意事项v-on 绑定事件语法实例$ref绑定事件语法实例事件解绑语法实例 总结事件绑定 基础知识 使用场景 子组件==>父组件传数据在父...
    99+
    2022-11-13
    Vue 事件绑定 Vue 事件解绑 Vue 事件
  • C++中命名空间(namespace)详解及其作用介绍
    目录为什么要有命名空间命名空间是什么怎么用为什么要有命名空间 在C语言中定义了3个层次的作用域:文件(编译单元)、函数和复合语句 在C++中,多了类 全局变量中不能有同名函数、变量和...
    99+
    2022-11-13
  • React事件处理和表单的绑定详解
    目录一、事件处理1.1 React事件1.2 事件对象1.3 事件传参1.4 函数组件事件处理二、表单一、事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素...
    99+
    2022-11-13
  • Node.JS事件的绑定与触发示例详解
    目录简介绑定事件on()addListener()once()监听事件emit() 传参 删除事件removeListener()removeAllListene...
    99+
    2022-11-16
    node.js事件绑定 nodejs事件触发 node 事件
  • jQuery中绑定事件方法bind()、on()、live()、one()的区别
    这篇文章主要讲解了“jQuery中绑定事件方法bind()、on()、live()、one()的区别”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“jQuer...
    99+
    2022-10-19
  • C/C++中命名空间(namespace)详解及其作用介绍
    目录概述命名空间命名空间的作用自定义命名空间命名空间成员的方法案例概述 命名空间 (namespace) 可以帮助我们区分不同库中相同名称的函数, 类, 变量等. 使用了命名空间即定...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作