.off()
.off( events [, selector ] [, handler ] )
描述:删除所有的事件处理函数。
- events类型:PlainObject一个对象,在那里,字符串键代表一个或多个空格隔开的事件类型,以及可选的命名空间;值代表先前附加到这些事件上的处理函数。
- selector类型:String一个选择器,它必须匹配一个在附加事件处理函数时,原来传给
.on()处理函数名。
- event类型:Event一个
jQuery.Event对象。
该签名不接受任何参数。
.off()方法删除了用.on()附加的事件处理函数。参见本页中对派遣事件和直接绑定事件的讨论,以了解更多信息。不带参数地调用.off()会删除所有附加到该元素上的处理函数。提供事件名称、命名空间、选择器,或者处理函数名的组合,可以指定要从元素上删除的事件处理函数。如果给定了多个筛选参数,只有与这些参数完全匹配的事件处理函数才会被删除。
如果提供了一个简单的事件名称,比如说"click",所有的那种类型的事件(直接事件以及委托事件)都会从jQuery集合中的元素上删除。在编写用作插件的代码的时候,或者基于大型代码而编程时,最佳实践是使用命名空间附加和删除事件,从而代码不会意外删除用别的代码附加的事件处理函数。在一个特定的命名空间中所有类型的事件都可以从一个元素上删除,只要提供一个命名空间,比如说".myPlugin"。命名空间或者事件名称至少必须提供一种。
要想删除特定的委托事件处理函数,只要提供selector参数。这个选择器字符串必须严格匹配在附加事件处理函数时,传递给.on()函数的选择器字符串。要想从元素上删除所有的委托事件,而不删除非委托事件,请使用特殊值"**"。
通过在handler参数中指定函数名,可以删除一个处理函数。当jQuery附加一个事件处理函数时,它会给处理函数设定一个独一无二的id。通过jQuery.proxy()或类似的机器获得的处理函数proxied,将具有同样的独一无二的id(代理函数),所以向.off()传递代理处理函数,可能删除的函数会超过预期。在那种情况下,用命名空间附加并删除事件处理函数会更好。
和.on()一样,你可以以一个对象的形式传递events,而不是指定一个events字符串以及handler函数作为分开的参数。针对events对象的键是事件名和/或命名空间;对象的值是处理函数或者特定的值false。
示例
在彩色的按钮上添加并删除事件处理函数。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>off 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">Add Click</button>
<button id="unbind">Remove Click</button>
<div style="display:none;">Click!</div>
<script>
function flash() {
$( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
$( "body" )
.on( "click", "#theone", flash )
.find( "#theone" )
.text( "Can Click!" );
});
$( "#unbind" ).click(function() {
$( "body" )
.off( "click", "#theone", flash )
.find( "#theone" )
.text( "Does nothing..." );
});
</script>
</body>
</html>
演示结果
从所有的段落文本上删除所有的事件处理函数。
$( "p" ).off();
从所有的段落文本上删除所有被委托的点击事件处理函数。
$( "p" ).off( "click", "**" );
通过把一个先前绑定处理函数传为.off()的第三个参数,来删除对它的绑定。
var foo = function() {
// 处理某些事件的代码
};
// ... 现在当点击段落文本时会调用foo ...
$( "body" ).on( "click", "p", foo );
// ... 不能再调用Foo了
$( "body" ).off( "click", "p", foo );
根据委托事件处理函数的命名空间来解绑所有的委托事件处理函数。
var validate = function() {
// 校验表单项的代码
};
// 在.validator命名空间下面委托事件。
$( "form" ).on( "click.validator", "button", validate );
$( "form" ).on( "keypress.validator", "input[type='text']", validate );
// 删除在.validator命名空间中的事件处理函数。
$( "form" ).off( ".validator" );