jQuery的事件绑(bind/unbind)定命名空间

但假设如下情况:需要在运行时根据用户交互的结果进行不同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 子空间"。

出现的原因

 代码如下 复制代码
$(‘.class’).bind(‘click’, function(){});

*jQuery1.7后,所以有事件建议使用on()来绑定,而不使用bind()了,这样做的目的是为了统一。而解绑就自然是Off(),unbind()相应地也不使用。
当你看源码的时候,可以发现,所有事件都是指回到on()这个方法,也就是所有的事件都可以用on来绑定。
当你想解绑一个特定的click事件,你就遇到麻烦了。因为unbind会解绑所有的click事件。

 代码如下 复制代码
$(‘.class’).unbind(‘click’);

当然还有一种方法,那就是创建一个引用函数。

 代码如下 复制代码
function handler() { … }
$(‘.class’).bind(‘click’, handler);
$(‘.class’).unbind(‘click’, handler);

但是,这不够灵活。

解决方法

 代码如下 复制代码

$(‘.class’).bind(‘click.namespace’, function(){});
$(‘.class’).trigger(‘click.namespace’); // Will trigger
$(‘.class’).trigger(‘click’); // Will trigger
$(‘.class’).trigger(‘click.other’); // Won’t trigger

实例

The Example:

 

 代码如下 复制代码

<script language="JavaScript">
<!--
  $.namespace("validate", {
    isFullName: function(elems){
      return elems.val().indexOf(" ") > -1;
    },
    isNick: function(elems){
      return elems.val().indexOf(" ") == -1;
    },
    isEmail: function(elems){
    return elems.val().match(/^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/);// erro;
    }
  });

  checkFullName = function(){
    ($("#myFullName").validate.isFullName())? alert('Valid'): alert('invalid');
  }

时间: 2024-09-21 05:50:55

jQuery的事件绑(bind/unbind)定命名空间的相关文章

JQuery中绑定事件(bind())和移除事件(unbind())

 本文主要向大家详细介绍了jQuery的绑定事件和移除事件的使用方法和示例分享,这里推荐给有需要的小伙伴们参考下.     有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例:   代码如下: <script type="text/javascript"> $(function(){ $('#btn').bind("click&

jQuery绑定事件监听bind和移除事件监听unbind用法实例详解_jquery

本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法.分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,unbind(eventType,Listener), 实例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w

JQuery中绑定事件(bind())和移除事件(unbind())_jquery

有时候事件执行完了,想取消事件的效果可以通过一定的办法来处理.比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果. 比如下面的一个案例: 复制代码 代码如下: <script type="text/javascript">     $(function(){        $('#btn').bind("click", function(){                      $('#test

解析jQuery的三种bind/One/Live事件绑定使用方法_jquery

jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

jquery的事件命名空间简单介绍

在多人协作的前端开发中,或许会遇到一个问题:几个开发人员都给一个元素添加了同样的事件,但是又有开发人员想要解除掉元素身上的某个事件效果,这时候操作起来就有些麻烦,需要用到jquery给我们提供的事件命名空间.说的有点抽象,举个例子先: 比如有一个开发人员写到下面这样的代码:  代码如下 复制代码 $("#box").on('click',function () {     $(this).css('background','#0f0'); }) 还有一个开发人员写成这样:  代码如下

jquery的事件名称和命名空间的例子

前言 在jquery的官方API中,有对命名空间的一些描述,地址是:http://api.jquery.com/on/ 这里面有一些英文介绍,题目是"Event names and namespaces"下面有一些介绍. 假如一些朋友不是很理解的话,我在这里简单的介绍一下! jQuery事件命名空间 我们先看一些代码: $("#haorooms").on("click.a",function(){}); $("#haorooms&quo

jQuery绑定和解绑点击事件及重复绑定解决办法

先简单说下jQuery绑定和解绑点击事件的方法,直接上代码:  代码如下 复制代码 $("#element").click(function(){}); //绑定点击事件函数 $("#element").unbind();        //解绑点击事件 $("#element").click(function(){});  //绑定其它函数 即,要对一个绑定过点击事件的元素绑定其它函数,需先对其解绑. 上面的代码看起来好简单,但是实际应用中却要

Jquery绑定事件(bind和live的区别介绍)_jquery

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

jQuery绑定事件之live()、bind()方法介绍

live() 方法为被选元素附加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 通过 live() 方法附加的事件处理程序适用于匹配选择器的当前及未来的元素(比如由脚本创建的新元素). 问题:使用jQuery的live()方法绑定事件,有时会出现重复绑定的情况,如,当点击一个按钮时,此按钮所绑定的事件会并执行n遍. 解决:使用die()方法,在live()方法绑定前,将此元素上的前面被绑定的事件统统解除,然后再通过live()方法绑定新的事件. Js代码  代码如下 复制代码 //先