.unbind()
.unbind( eventType [, handler ] )
描述:从匹配的元素上删除以前附加的事件处理函数。
- eventType类型:String一个字符串,它包含了一个JavaScript事件对象,比如说
click或者keydown。 - handler不再需要执行的那个函数。
- event类型:Event一个
jQuery.Event对象。
该签名不接受任何参数。
用.bind()方法附加的事件处理函数,可以用.unbind()方法来删除。(自从jQuery 1.7,.on()方法和.off()方法优先用来在元素上附加事件处理函数、删除事件处理函数。)在最简单的情况中,不带参数地调用.unbind(),可以删除所有的附加到该元素上的事件处理函数。
$( "#foo" ).unbind();
这个版本会删除所有的处理函数,无论是哪种类型的处理函数。要想更细致,我们可以传入一个事件类型。
$( "#foo").unbind( "click" );
通过指定click事件类型,只有针对这种事件类型的处理函数会被解除绑定。然而,这个事件方式依然可能有负面副作用,比如说别的脚本可能对同一个元素附加了行为。出于这个原因,强健而且可扩展的应用程序通常需要两个参数的那个版本:
var handler = function() {
alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );
通过命名处理函数,我们可以保证不会意外删除别的函数。注意,以下的代码不会起作用:
$( "#foo" ).bind( "click", function() {
alert( "The quick brown fox jumps over the lazy dog." );
});
// 不起作用
$( "#foo" ).unbind( "click", function() {
alert( "The quick brown fox jumps over the lazy dog." );
});
即使两个函数具有相同的内容,它们是分别创建的,因此JavaScript会把它们当成是不同的函数对象。要想解绑一个特定的处理函数,我们需要对函数的一个引用,而不是做同样的事的不同函数。
注意:使用一个代理函数在一个元素上解绑一个事件,将解绑这个元素上所有的代理函数,因为同样的代理函数用于所有代理事件。要想解绑一个特定事件,请在绑定它们时,在事件上使用独一无二的类名(例如,click.proxy1、click.proxy2)。
使用命名空间
为了将来解绑处理函数,可以为处理函数保留引用,但还有另一个代替办法,我们可以给事件添加命名空间,并使用这个功能以收狭我们的解除绑定的操作的范围。我们在.bind()方法中已经有过讨论,在绑定处理函数时,使用一个点号字符(.)就可以定义命名空间:
$( "#foo" ).bind( "click.myEvents", handler );
即使以这种形式绑定一个处理函数,我们依然可以用常规方法解绑它:
$( "#foo" ).unbind( "click" );
然而,如果我们想避免影响别的处理函数,可以做更多的指定:
$( "#foo" ).unbind( "click.myEvents" );
我们还可以解绑某个命名空间内的所有函数,无论是哪种事件类型:
$( "#foo" ).unbind( ".myEvents" );
当我们想开发插件的时候,给事件绑定附加命名空间特别有用,否则书写代码将来可能影响别的事件处理函数。
使用Event对象
.unbind()方法的第三种形式是用在当我们想要在它内部解绑这个处理函数的时候。举个例子,假设我们想要只触发一个事件处理函数三次:
var timesClicked = 0;
$( "#foo" ).bind( "click", function( event ) {
alert( "The quick brown fox jumps over the lazy dog." );
timesClicked++;
if ( timesClicked >= 3 ) {
$( this ).unbind( event );
}
});
在这种情况中,该处理函数将取用一个参数,因此我们可以捕获事件对象,并在第三次点击之后,用它来解除绑定事件。该事件对象包含了.unbind()必不可少的上下文,以知道要删除哪个事件处理函数。这个示例也是一个闭包的演示。因为处理函数引用了timesClicked变量,它在函数外部定义,因此在调用这个处理函数时,这个变量会不断递增。
示例
可以向彩色的按钮上绑定事件并解绑事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>unbind demo</title>
<style>
button {
margin: 5px;
}
button#theone {
color: red;
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="theone">Does nothing...</button>
<button id="bind">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
<script>
function aClick() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "#theone" )
.bind( "click", aClick )
.text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "#theone" )
.unbind( "click", aClick )
.text( "Does nothing..." );
});
</script>
</body>
</html>
演示结果
要想从所有的段落文本上解绑所有事件,只要这么写:
$( "p" ).unbind();
要想从所有的段落文本上解绑所有click事件,只要这么写:
$( "p" ).unbind( "click" );
要想只解绑一个先前绑定的处理函数,传递该函数作为第二个参数:
var foo = function() {
// 处理某些事件的代码
};
$( "p" ).bind( "click", foo ); // ... 现在当点击段落文本时会调用foo ...
$( "p" ).unbind( "click", foo ); // ... foo will no longer be called.