您当前的位置:移动互联网学院 > HTML5培训 > 前端开发 > JQuery > 浅析jquery unbind()方法移除元素绑定的事件

浅析jquery unbind()方法移除元素绑定的事件

时间:2017-09-12 16:22 来源:jquery开发教程汇总

unbind()方法可以移除元素已绑定的事件,它的调用格式如下:

$(selector).unbind(event,fun)

其中参数event表示需要移除的事件名称,多个事件名用空格隔开,fun参数为事件执行时调用的函数名称。

语法

unbind()函数主要有以下两种形式的用法:

用法一:

jQueryObject.unbind( [ events [, handler ]] )

移除当前匹配元素的events事件绑定的事件处理函数handler。

用法二:

jQueryObject.unbind( eventObject )

为指定事件处理函数传入的Event对象,用于移除对应的事件处理函数。

参数 描述

events 可选/String类型一个或多个用空格分隔的事件类型和可选的命名空间,例如"click"、"focus click"、"keydown.myPlugin"。

handler 可选/Function类型指定的事件处理函数。

eventObject Object类型一个Event对象,用于移除传入该对象的事件处理函数。

jQuery 1.4.3 新增支持参数handler可以为false。用于移除绑定事件时,handler参数为false值的事件处理函数。

如果省略参数handler,则移除匹配元素指定类型的事件上绑定的所有事件处理函数。

如果省略了所有参数,则表示移除匹配元素上为任何元素绑定的任何事件类型的任何事件处理函数。

返回值

unbind()函数的返回值为jQuery类型,返回当前jQuery对象本身。

实际上,unbind()函数的参数全是筛选条件,只有匹配所有参数条件的事件处理函数都将被移除。参数越多,限定条件就越多,被移除的范围就越小。

示例&说明

请参考下面这段初始HTML代码:
<input id="btn1" type="button" value="点击1" />
<input id="btn2" type="button" value="点击2" />
<a id="a1" href="#">CodePlayer</a> 

首先,我们为上述button和元素绑定事件,然后使用unbind()函数解除事件绑定,相应的代码如下:

function btnClick1(){

alert( this.value + "-1" );

}

function btnClick2(){

alert( this.value + "-2" );

}

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数btnClick1

$buttons.bind( "click", btnClick1 );

// 为所有button元素的click事件绑定事件处理函数btnClick2

$buttons.bind( "click", btnClick2 );

// 为所有a元素的click、mouseover、mouseleave事件绑定事件处理函数

$("a").bind( "click mouseover mouseleave", function(event){

if( event.type == "click" ){

alert("点击事件");

}else if( event.type == "mouseover" ){

$(this).css("color", "red");

}else{

$(this).css("color", "blue");

}

});

// 移除为所有button元素的click事件绑定的事件处理函数btnClick2

// 点击按钮,只执行btnClick1

$buttons.unbind("click", btnClick2);

// 移除为所有button元素的click事件绑定的所有事件处理函数(btnClick1和btnClick2)

// 点击按钮,不会执行任何事件处理函数

// $buttons.unbind("click");

// 只移除为btn1元素的click事件绑定的所有事件处理函数

// btn2元素的click事件仍然有效

// $("#btn1").unbind("click");

// 移除为所有a元素的任何事件绑定的所有处理函数

// 点击链接,或用鼠标在链接上移入、移出,都不会触发执行任何事件处理函数

// $("a").unbind( );

 

unbind()函数还可以根据传入的事件对象来移除函数。以下jQuery代码只允许第一次点击按钮【点击1】时弹出提示框,之后立即移除该点击事件。

var $btn1 = $("#btn1");

$btn1.bind("click", function(event){

alert("只执行一次!");

$(this).unbind( event ); // 移除当前事件处理函数

});

此外,unbind()函数还可以只移除指定命名空间的事件绑定。

var $buttons = $(":button");

// 为所有button元素的click事件绑定事件处理函数

$buttons.bind( "click.foo.bar", function btnClick1(){

alert( "click-1" );

} );

// 为所有button元素的click事件绑定事件处理函数

$buttons.bind( "click.test.bar", function btnClick1(){

alert( "click-2" );

} );

// 移除包含命名空间foo的click事件绑定的事件处理函数

$buttons.unbind( "click.foo" ); // 移除click-1

//移除包含命名空间bar的click事件绑定的事件处理函数

// $buttons.unbind( "click.bar" ); // 移除click-1和click-2

//移除包含命名空间test的click事件绑定的事件处理函数

// $buttons.unbind( "click.test" ); // 移除click-2

// 移除所有button元素的click事件绑定的所有事件处理函数

// $buttons.unbind("click"); // 移除click-1和click-2

  • 北京

    010-82600385/6

    北京市海淀区西三旗悦秀路北京明园大学校内

  • 上海

    021-54485127

    上海市徐汇区漕溪路250号银海大楼11层

  • 深圳

    0755-25590506

    深圳市龙华新区人民北路美丽AAA大厦15层

  • 成都

    028-85405115

    成都武侯区科华北路99号科华大厦2层

  • 南京

    025-86551900

    南京市白下区汉中路185号鸿运大厦11层

  • 武汉

    027-87804688

    武汉工程大学卓刀泉校区科技孵化器大楼11层

  • 西安

    029-88756251

    西安市高新区高新1路12号天公大厦3层

  • 广州

    020-38342087

    广州市天河软件园柯木塱园5栋三层

  • 沈阳

    024-24349000

    沈阳市沈河区北顺城路137号锦峰大厦7层

  • 济南

    0531-88898293

    济南市高新区舜华路三庆世纪财富中心B3座6层

  • 重庆

    023-68064704

    重庆市九龙坡区渝州路87号双薪时代九楼

  • 长沙

    15010390966

    长沙市开福区芙蓉中路海东青大厦B座11楼

Copyright © 2004-2017 华清远见教育集团 版权所有,沪ICP备10038863号-3,京公海网安备110108001117号