`

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事件(绑定和解绑事件)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    读jQuery之十三 添加事件和删除事件的核心方法

    这里只提供bind和unbind方法。暂不包含 1, 事件命名空间(event namespace) 2, 事件代理(event delegation) 3, 特殊事件如dom ready 接口如下: 代码如下: E.bind(el, ‘click’, fn); E.bind(el, ‘click’, fn,...

    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 。

    service理解demo

    区别start bind end unbind

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

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

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

    比如bind()(绑定事件)和unbind()(移除通过bind()方法添加的事件)方法来移除事件的效果。 比如下面的一个案例: 代码如下: [removed]  $(function(){  $(‘#btn’).bind(“click”, function(){  $(‘#test’...

    servicedemo

    android service demo 启动,停止service bind,unbind service

    JQuery详解jQuery的bind方法

    jQuery的bind的函数在实际应用其实不是特别多,只是他可以绑定一个事件,但不会即时触发,也可以通过unbind来解除绑定。

    联通SGIP1.3 短信实例PHP版

    联通SGIP1.3 php socket实现,bind,unbind,submit,report等指令。

    jQuery:unbind方法的使用详解

    unbind方法只能解绑用jQuery的bind方法以及用jquery方法注册的事件处理程序。比如:$(‘a’).click(function(){})可以通过unbind解绑。用原生addEventListener以及IE下的attachEvent注册的事件以及使用onclick/...

    jQuery unbind()方法实例详解

    jQuery 中的 unbind() 方法是 bind() 方法的反向操作,从每一个匹配的元素中删除绑定的事件。 语法结构: 复制代码 代码如下:unbind([type][, data]); type是事件类型,data为将要移除的事件。具体说明如下: 1、...

    jQuery中unbind()方法用法实例

    本文实例讲述了jQuery中unbind()方法用法。分享给大家供大家参考。具体分析如下: 此方法移除被选元素的事件处理程序,包括通过bind()方法注册的自定义事件。 unbind()方法如果不带参数,则删除所有绑定的事件。 此...

    backbone-bind-to:Backbone.js 扩展,用于将模型事件自动绑定和解除绑定到视图

    扩展,用于将模型事件自动绑定和解除绑定到视图。 特征 绑定到模型 在许多应用程序中,当您想对模型事件做出React时,您必须编写: window . UserCardView = Backbone . View . extend ( { initialize : function...

    JQuery入门——移除绑定事件unbind方法概述及应用

    1、在DOM对象的实践操作中,既然存在用于绑定事件的bind方法,也相应存在用于移出绑定事件的方法,在JQuery中,可以通过unbind方法移除所有绑定的事件或某一个事件。 2、示例代码: 代码如下:&lt;!DOCTYPE ...

Global site tag (gtag.js) - Google Analytics