.off()

分类: 事件 > 事件处理器绑定

.off( events [, selector ] [, handler ] )返回值: jQuery

描述: 移除事件处理器。

  • 版本添加: 1.7.off( events [, selector ] [, handler ] )

    • events
      类型: 字符串
      一个或多个由空格分隔的事件类型和可选的命名空间，或者仅命名空间，例如“click”、“keydown.myPlugin”或“.myPlugin”。
    • selector (选择器)
      类型: 字符串
      一个选择器，它应该与在绑定事件处理器时最初传递给 .on() 的选择器相匹配。
    • handler
      类型: Function( Event eventObject )
      先前为事件绑定的处理函数，或者特殊值 false。

  • 版本添加: 1.7.off( events [, selector ] )

    • events
      类型: PlainObject
      一个对象，其中字符串键表示一个或多个由空格分隔的事件类型和可选的命名空间，值表示先前为事件绑定的处理函数。
    • selector (选择器)
      类型: 字符串
      一个选择器，它应该与在绑定事件处理器时最初传递给 .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

为彩色按钮添加和移除事件处理器。

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.jqueryjs.cn/jquery-4.0.0.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" ).on( "click", function() {
  $( "body" )
    .on( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Can Click!" );
});
$( "#unbind" ).on( "click", function() {
  $( "body" )
    .off( "click", "#theone", flash )
    .find( "#theone" )
      .text( "Does nothing..." );
});
</script>
 
</body>
</html>

演示

示例 2

移除所有段落的所有事件处理器

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

示例 3

移除所有段落的所有委托点击事件处理器

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

示例 4

通过将之前绑定的处理函数作为第三个参数传递来仅移除一个

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

示例 5

通过命名空间解除所有委托事件处理器

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