本文详细介绍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( );
此外,还可以通过传入事件对象来移除特定函数。以下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()方法移除元素绑定事件的详解即为全部内容,希望能为读者提供参考。