当前位置: 首页>>代码示例 >>用法及示例精选 >>正文

JQuery .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"，则该类型的 all 事件(直接和委托)将从 jQuery 集中的元素中删除。在编写将用作插件的代码时，或者仅在使用大型代码库时，最佳实践是使用命名空间附加和删除事件，这样代码就不会无意中删除由其他代码附加的事件处理程序。通过仅提供命名空间(例如 ".myPlugin" )，可以从元素中删除特定命名空间中所有类型的所有事件。至少，必须提供命名空间或事件名称。

要删除特定的委托事件处理程序，请提供 selector 参数。选择器字符串必须与附加事件处理程序时传递给.on() 的字符串完全匹配。要从元素中移除所有委托事件而不移除非委托事件，请使用特殊值 "**" 。

也可以通过在 handler 参数中指定函数名称来删除处理程序。当 jQuery 附加一个事件处理程序时，它会为处理程序函数分配一个唯一的 id。由 jQuery.proxy() 或类似机制代理的处理程序都将具有相同的唯一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-3.5.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" ).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", "**" );

通过将其作为第三个参数传递来仅删除一个先前绑定的处理程序：

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

通过名称空间取消绑定所有委托的事件处理程序：

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

相关用法


注：本文由纯净天空筛选整理自jquery.com大神的英文原创作品 .off()。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。