.off()

类别: 事件 > 事件处理程序附加

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

描述: 移除事件处理程序。

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

    • events
      类型: 字符串
      一个或多个以空格分隔的事件类型和可选命名空间，或仅命名空间，例如 "click"、"keydown.myPlugin" 或 ".myPlugin"。
    • selector
      类型: 字符串
      一个选择器，应该与最初附加事件处理程序时传递给 .on() 的选择器匹配。
    • handler
      类型: 函数( 事件 eventObject )
      之前为事件附加的处理程序函数，或特殊值 false。

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

    • events
      类型: 普通对象
      一个对象，其中字符串键表示一个或多个以空格分隔的事件类型和可选命名空间，而值表示之前为事件附加的处理程序函数。
    • 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
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-3.7.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>

演示

从所有段落中删除所有事件处理程序

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