.off()

类别：事件 > 事件处理函数附件

.off( events [, selector ] [, handler ] )返回类型：jQuery

描述：删除一个事件处理函数。

  • 增补版本：1.7.off( events [, selector ] [, handler ] )

    • events
      类型：String
      一个或多个空格分隔的事件类型，以及可选的参数，或者命名空间，譬如“click”、“keydown.myPlugin”，或者“.myPlugin”。
    • selector
      类型：String
      一个选择器，必须匹配附加事件处理函数时传给.on()的选择器之一。
    • handler
      类型：Function( Event 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()或类似的机制代理的处理函数，将具有相同的唯一ID（代理函数），所以向.off()传递代理处理函数可能将删除比预期更多的函数。在那种情况下，最好使用命名空间来附加或删除事件处理函数。

利用.on()，你可以将events传递为对象，代替指定一个events字符串和handler函数作为分开的参数。针对events对象的键是事件和或命名空间；值是处理函数或特殊值false。

示例：

在着色按钮上添加删除事件处理函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
<!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>

演示：

从所有段落上删除所有事件处理函数：

1
 
$( "p" ).off();

从所有的段落上删除所有的委托点击处理函数：

1
 
$( "p" ).off( "click", "**" );

只删除一个先前绑定的处理函数，只要把函数传为第三个参数。

1
2
3
4
5
6
7
8
9
 
var foo = function() {
  // Code to handle some kind of event
};
 
// ... Now foo will be called when paragraphs are clicked ...
$( "body" ).on( "click", "p", foo );
 
// ... Foo will no longer be called.
$( "body" ).off( "click", "p", foo );

利用委托事件的命名空间解绑所有委托事件。

1
2
3
4
5
6
7
8
9
10
11
 
var validate = function() {
  // Code to validate form entries
};
 
// Delegate events under the ".validator" namespace
$( "form" ).on( "click.validator", "button", validate );
 
$( "form" ).on( "keypress.validator", "input[type='text']", validate );
 
// Remove event handlers in the ".validator" namespace
$( "form" ).off( ".validator" );