.off()| jqueryAPI 2.2 中文手册- AspRain.cn 致力于Web开发技术翻译整理

jQuery API 2.2.0

.off()

分类:事件 > 事件处理附加物

返回: jQuery

.off( events [, selector ] [, handler ] )

描述:删除所有的事件处理函数。

加入于: 1.7
.off( events [, selector ] [, handler ] )
  • events
    类型:String
    一个或更多的用空格分隔的事件类型,以及可选的命名空间,比如说"click"或者"keydown.myPlugin"。
  • selector
    类型:String
    一个选择器,它必须匹配一个在附加事件处理函数时,原来传给.on()处理函数名。
  • handler
    类型:FunctionEvent eventObject )
    一个先前附加到事件上的处理函数,或者特殊值false
加入于: 1.7
.off( events [, selector ] )
  • events
    类型:PlainObject
    一个对象,在那里,字符串键代表一个或多个空格隔开的事件类型,以及可选的命名空间;值代表先前附加到这些事件上的处理函数。
  • selector
    类型:String
    一个选择器,它必须匹配一个在附加事件处理函数时,原来传给.on()处理函数名。
加入于: 1.7
.off( event )
加入于: 1.7
.off()

该签名不接受任何参数。

.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" );

如果网页上不能运行示例,请点击http://www.asprain.cn/jQueryAPI/off.htm查看示例。

如果你觉得本文档对你有用,欢迎给翻译作者支付宝打赏,支持翻译作者源源不断翻译更多有用的技术文档。