• 场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数。
  • 问题
    1. unbind时会解绑所有的click事件,造成误伤。如果之前bind时有定义处理函数的方法名,可以通过将方法名传给unbind的第二个参数来解绑指定的bind;但很多情况下bind的处理函数都是匿名函数,此时unbind的第二个参数无法处理。
    2. click事件发生时无法指定调用某个具体的事件处理函数,只能将不该调用的函数给unbind掉。
  • 解决:采用命名空间,命名空间用法
  • <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
    function myfunction1() {
    alert(1);
    return false;
    }
    function myfunction2() {
    alert(2);
    return false;
    }
    function myfunction3() {
    alert(3);
    return false;
    }
    $(function () {
    $('#test').bind('click.a', myfunction1);
    $('#test').bind('click.b', myfunction2);
    $('#test').bind('click.c', myfunction3); $('#test').unbind('click.a');
    //$('#test').trigger('click.b');
    $('#test').trigger();
    // $('#test').click();
    })
    </script>
    </head>
    <body>
    <input id="test" type="button" name="button" value="button" width="70">
    </body>
    </html>

    通过事件名(click)后加'.'来指定新的命名,本例中分别指定的新的命名a、b、c,这样在unbind时就可以解绑指定的函数;在trigger时就可以调用指定的函数。很多js扩展功能都采用命名空间来区分出自己的事件和避免与页面原有事件产生冲突。

  • 参考链接:http://blog.csdn.net/clangke/article/details/7612224

jquery中bind事件时的命名空间用法(转)的更多相关文章

  1. jQuery中绑定事件bind() on() live() one()的异同

    jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件 bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也 ...

  2. JQuery中bind和unbind函数与onclick绑定事件区分

    JQuery中bind和unbind函数转载:   https://blog.csdn.net/liucheng417/article/details/51131982 页面代码: <body& ...

  3. Jquery中的事件绑定$(&quot;#btn&quot;).bind(&quot;click&quot;,function(){ })

    Jquery中的事件绑定:$("#btn").bind("click",function(){  }) 由于每次都这么调用太麻烦,所以jquery就用$(&qu ...

  4. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  5. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  6. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  7. 锋利的jQuery读书笔记---jQuery中的事件

    jQuery中的事件: 1.加载DOM:注意window.onload和$(document).ready()的不同 2.事件绑定 3.合成事件 --2和3的详细信息见代码- <!DOCTYPE ...

  8. 第4章 jQuery中的事件和动画

    4.1 jQuery中的事件 4.1.1 加载DOM jQuery就是用 `$(document).ready()方法来代替传统JavaScript的window.onload方法的. 1.执行时机 ...

  9. 第3章 jquery中的事件和动画

    一,jquery中的事件 (1).执行时机 $(document).ready()和window.onload方法有相似的功能,但是在执行时机方面有区别,windwo.onload在网页中所有的元素包 ...

随机推荐

  1. mint上部署lamp环境

    不得不说现在在linux mint上部署lamp很方便,比windows服务器上的asp.net的部署升级都简单. 1 安装MySql sudo apt-get install mysql-serve ...

  2. 自定义jQuery插件Step by Step

    1.1.1 摘要 随着前端和后端技术的分离,各大互联网公司对于 Mobile First理念都是趋之若鹜的,为了解决网页在不同移动设备上的显示效果,其中一个解决方案就是Responsive Desig ...

  3. 手动实现KVO

    前言 KVO(Key-Value Observing, 键值观察), KVO的实现也依赖于runtime. 当你对一个对象进行观察时, 系统会动态创建一个类继承自原类, 然后重写被观察属性的sette ...

  4. 如何查看,关闭和开启selinux

    以下介绍一下SELinux相关的工具/usr/bin/setenforce 修改SELinux的实时运行模式setenforce 1 设置SELinux 成为enforcing模式setenforce ...

  5. AngularJS directive入门例子

    这是<AngularJS>这本书里面提供的一个例子: JS代码: var expanderModule=angular.module('expanderModule', []) expan ...

  6. BZOJ4033 [HAOI2015]T1

    令$f[p][i]$表示以$p$为根的子树内,选了$i$个黑点,剩下的都是白点的这个子树内贡献的答案 如果$p$的子树都算出来了,只要计算$p$与$fa[p]$之间的边对答案的贡献就好了,贡献是$di ...

  7. BZOJ2621 [Usaco2012 Mar]Cows in a Skyscraper

    首先比较容易想到是状态压缩DP 令$f[S]$表示选取了集合$S$以后,已经送了最少次数$cnt$且当前电梯剩下的体积$rest$最大(即$f[S]$是一个二元组$(cnt, rest)$) 于是$f ...

  8. hihocoder 1138 Islands Travel dijkstra+heap 难度:2

    http://hihocoder.com/problemset/problem/1138 很久不用最短路,几乎连基本性质也忘了,结果这道题就是某些最短路算法空间复杂度是o(n) 这里总结四种算法 算法 ...

  9. ionic build --release android

    ionic bulid android ionic build --release android keytool -genkey -v -keystore demo.keystore -alias ...

  10. outlook新邮件到达提醒设置以及outlook最小化到托盘设置

    有些邮件是需要马上处理的,因此希望能在收到邮件之后马上就知道,但是有不希望频繁的去检查有没有.outlook可以帮我们轻松做到新邮件到达提醒. 一 .设置outlook新邮件到达提醒:选项->电 ...