jQuery unbind()方法详解:移除元素绑定事件的语法与用法

作者:白露时间:2026-10-30 07:24:27浏览:554

本文详细介绍jQuery中unbind()方法的功能与用法。该方法用于移除元素已绑定的事件处理函数,支持通过事件名称、处理函数或Event对象进行精确移除。文章解析了参数含义、返回值及不同参数组合下的移除范围,并结合示例代码演示了如何解除特定按钮或链接的事件绑定,以及利用命名空间管理事件的技巧。

unbind()方法概述与语法

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()函数的所有参数均作为筛选条件。只有同时满足所有参数条件的事件处理函数才会被移除。提供的参数越多,筛选条件越严格,被移除的事件范围就越小。

unbind()使用示例

示例与说明

参考以下初始HTML结构:

 


<input id="btn1" type="button" value="点击1" /> 
<input id="btn2" type="button" value="点击2" /> 
<a id="a1" href="#">CodePlayer</a> 

首先,为上述button和<a>元素绑定事件,随后使用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 

以上关于jQuery unbind()方法移除元素绑定事件的详解即为全部内容,希望能为读者提供参考。

作者最新文章