`

bind和unbind

阅读更多
测试:
页面代码:
<body>
    <input type="button" name="aaa" value="点击我">
    <input type="checkbox" name="checkbox1">
</body>
JQuery代码:
$().ready(function(){
      for (var i = 0; i < 3; i++) {
            $("input[type='button']").click(function(){
               alert("aaaa");
          });
      }
}
alert("aaaa")会执行三次,在事件嵌套事件中,不希望看到这样的情况,需要把上层事件禁用,此时可引入bind和unbind函数解决。
引入函数:
for (var i = 0; i < 3; i++) {
        $("input[type='button']").unbind("click");
        $("input[type='button']").bind("click", function(){
            alert("aaa");
        });
 }
alert("aaa");仅执行一次。
bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数
unbind() 方法移除被选元素的事件处理程序。能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
event 是事件类型,类型包括:blur、flcus、load、resize、scroll、unload、click、dblclikc、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等,当然也可以是自定义名称。
data 为可选参数,作文event.data属性值传递给事件对象的额外数据对象。
function 是用来绑定的处理函数。 
语法:
$(selector).bind(event,data,function)  // event 和 function 必须指出

下面些段代码做说明:

例1:删除p的所有事件

$("p").unbind();

例2:删除p的click事件

$("p").unbind("click");

例2:删除p元素click事件后出发的test函数 和 添加p元素click事件后触发的test函数

$("p").unbind("click",test);
$("p").bind("click",test);

注意:要定义 .bind() 必须指明什么事件和函数

现在来看个简单的demo ,整个div有一个点击收起展开的事件,如果想要点击链接但是不触发div的点击事件,需要在触发链接的时候把div的点击事件禁用,这里我用到链接mouseenter事件是unbind删除div的事件。这里还不算完,这时候只要鼠标进入链接区域,div的点击事件就删除了,我们还需要加入鼠标移出链接区域的时候恢复div点击事件。代码如下:

1
2
3
4
5
6
7
8
9
10
$(function(){ var Func = function(){    $(".com2").toggle(200); }
        $(".test").click(Func)
        $(".test a").mouseenter(function(){
                $(".test").unbind(); //删除.test的所有事件 });
        $(".test a").mouseleave(function(){
                $(".test").bind("click",Func); //添加click事件 }); });

event 是事件类型

function 是用来绑定的处理函数。 部分内容来自http://www.dearoom.com/blog/详解unbind和bind/
分享到:
评论

相关推荐

    浅谈jQuery的bind和unbind事件(绑定和解绑事件)

    下面小编就为大家带来一篇浅谈jQuery的bind和unbind事件(绑定和解绑事件)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    自己整理的android面试题

    - **bindService()**:用于客户端和服务端进行交互,服务随着客户端的bind和unbind调用而创建和销毁。生命周期包括`onCreate() -&gt; onBind() -&gt; onUnbind() -&gt; onDestroy()`。 - **结合使用**:通常先用`start...

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

    本文实例讲述了jQuery绑定事件监听bind和移除事件监听unbind用法。分享给大家供大家参考,具体如下: 这里分别采用后bind(eventType,[data],Listener)//data为可选参数,one()该方法绑定的事件触发一次后自动删除,...

    Page Keys Binding Patch for Xpdf:添加了用于向上移动十页和向下移动十页的键盘功能。-开源

    页面键绑定修补程序添加以下默认键绑定:-Shift + PgUp-撤退PDF文件中的十页-Shift + PgDn-前进PDF文件中的十页此修补程序还提供以下命令以启用用户配置在配置文件中带有bind和unbind选项:-“ prevTenPages”用于在...

    aws-rds-service-broker:适用于 Amazon RDS 的可配置 Cloud Foundry 服务代理

    bind 和 unbind 不保留任何注册。 服务代理是无状态的,因为它不在本地文件系统上存储任何信息并且是无状态的。 这意味着您可以出于 HA 目的部署代理的多个实例。 该服务代理在 Stackato 上进行了测试。 配置 服务...

    custom-resize

    自订大小 自定义大小调整脚本。 在移动版Chrome和Firefox中,导航栏消失时会触发调整大小事件。 如果您不想在这种情况下进行任何不必要的计算,...该脚本使用两个属性将customResize对象添加到窗口: bind和unbind 。

    封装了一个支持匿名函数的Javascript事件监听器

    接着,封装了两个主要的函数:bind和unbind。bind函数负责添加事件监听,而unbind函数负责移除事件监听。在bind函数中,如果浏览器支持addEventListener方法,则使用该方法,并将匿名函数作为回调函数传递。如果...

    原生js事件的添加和删除的封装

    本文档中的封装函数包括bind和unbind两个函数,分别用于添加和删除事件监听器。为了实现这一点,我们首先需要检测目标对象(例如一个DOM元素)是否支持addEventListener方法,如果不支持,再尝试attachEvent方法,...

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

    在jQuery中,事件处理机制尤为强大,其中bind()和unbind()方法是用来绑定和移除事件监听器的函数,它们是进行事件处理时不可或缺的一部分。 首先我们来看bind()方法。在jQuery中,通过bind()可以为选定的元素添加一...

    js原生实现FastClick事件的实例

    这个函数返回一个对象,对象内包含handler、bind和unbind方法。handler函数是点击事件的处理函数,bind和unbind方法分别用于绑定和解绑事件监听器。通过bind方法可以将FastClick事件绑定到特定的HTML元素上,比如...

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

    1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理。比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等...

    JQuery详解jQuery的bind方法

    与原生 JavaScript 的事件绑定相比,`bind()` 提供了更多灵活性和便捷性。它允许开发者指定一个或多个事件类型,并为这些事件类型绑定一个或多个处理函数。 #### 二、基本用法 `bind()` 方法的基本语法如下: ```...

    myEvent.js javascript跨浏览器事件框架

    在这个命名空间下,定义了两个关键的方法:bind和unbind。 - bind方法用于事件绑定。它的参数包括要绑定事件的元素、事件名以及要绑定的回调函数。在实现过程中,该方法会为每个元素创建一个唯一的标识(guid),并...

    jQuery取消特定的click事件

    此外,通过jQuery提供的bind和unbind方法,我们可以灵活地在页面的生命周期中动态地添加或移除事件处理器。这些技巧对于开发动态交互的Web应用尤为重要。 最后,文中还提到了一些关于jQuery的其他专题,比如...

Global site tag (gtag.js) - Google Analytics