當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

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()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。