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

JQuery .unbind()用法及代碼示例


用法 
.unbind( eventType [, handler ] ) => jQuery

不推薦使用的版本：3.0

說明：從元素中刪除先前附加的事件處理程序。

  • 添加的版本：1.0.unbind( eventType [, handler ] )

    • eventType
      類型：String
      包含一種或多種 DOM 事件類型的字符串，例如 "click" 或 "submit," 或自定義事件名稱。
    • handler
      類型：Function(Event eventObject)
      不再執行的函數。

  • 添加的版本：1.4.3.unbind( eventType, false )

    • eventType
      類型：String
      包含一種或多種 DOM 事件類型的字符串，例如 "click" 或 "submit," 或自定義事件名稱。
    • false
      類型：Boolean
      取消綁定使用 .bind( eventType, false ) 綁定的相應 'return false' 函數。

  • 添加的版本：1.0.unbind( event )

  • 添加的版本：1.0.unbind()

    • 此簽名不接受任何參數。

從 jQuery 3.0 開始，.unbind() 已被棄用。自 jQuery 1.7 起，它被 .off() 方法取代，因此不鼓勵使用它。

使用 .bind() 附加的事件處理程序可以使用 .unbind() 刪除。在最簡單的情況下，沒有參數，.unbind() 刪除所有附加到元素的處理程序：

$( "#foo" ).unbind();

此版本刪除處理程序，無論類型如何。更準確地說，我們可以傳遞一個事件類型：

$( "#foo").unbind( "click" );

通過指定 click 事件類型，隻有該事件類型的處理程序將被解除綁定。但是，如果其他腳本可能將行為附加到同一元素，這種方法仍然會產生負麵影響。由於這個原因，健壯和可擴展的應用程序通常需要兩個參數的版本：

var handler = function() {
  alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );

通過命名處理程序，我們可以確保不會意外刪除其他函數。請注意，以下將 not 工作：

$( "#foo" ).bind( "click", function() {
  alert( "The quick brown fox jumps over the lazy dog." );
});
 
// Will NOT work
$( "#foo" ).unbind( "click", function() {
  alert( "The quick brown fox jumps over the lazy dog." );
});

盡管這兩個函數的內容相同，但它們是分開創建的，因此 JavaScript 可以自由地將它們保留為不同的函數對象。要取消綁定特定的處理程序，我們需要對該函數的引用，而不是碰巧做同樣事情的另一個函數。

注意：使用代理函數取消綁定元素上的事件將取消綁定該元素上的所有代理函數，因為所有代理事件都使用相同的代理函數。要允許取消綁定特定事件，請在事件上使用唯一的類名(例如click.proxy1,click.proxy2) 連接它們時。

使用命名空間

無需維護對處理程序的引用以解除綁定，我們可以命名事件並使用此函數來縮小解除綁定操作的範圍。如 .bind() 方法的討論中所示，命名空間是通過在綁定處理程序時使用句點 (.) 字符定義的：

$( "#foo" ).bind( "click.myEvents", handler );

當處理程序以這種方式綁定時，我們仍然可以正常方式解除綁定：

$( "#foo" ).unbind( "click" );

但是，如果我們想避免影響其他處理程序，我們可以更具體：

$( "#foo" ).unbind( "click.myEvents" );

我們還可以取消綁定命名空間中的所有處理程序，而不管事件類型如何：

$( "#foo" ).unbind( ".myEvents" );

當我們開發plug-ins 或編寫將來可能與其他事件處理代碼交互的代碼時，將命名空間附加到事件綁定特別有用。

使用事件對象

.unbind() 方法的第三種形式用於我們希望從自身內部取消綁定處理程序。例如，假設我們隻希望觸發一個事件處理程序 3 次：

var timesClicked = 0;
$( "#foo" ).bind( "click", function( event ) {
  alert( "The quick brown fox jumps over the lazy dog." );
  timesClicked++;
  if ( timesClicked >= 3 ) {
    $( this ).unbind( event );
  }
});

這種情況下的處理程序必須帶一個參數，這樣我們才能捕獲事件對象，並在第三次單擊後使用它來解除處理程序的綁定。事件對象包含.unbind() 知道要刪除哪個處理程序所需的上下文。這個例子也是一個閉包的例子。由於處理程序引用了在函數外部定義的timesClicked 變量，因此即使在處理程序的調用之間增加變量也會產生影響。

例子：

可以將事件綁定和取消綁定到彩色按鈕。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>unbind 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">Bind Click</button>
<button id="unbind">Unbind Click</button>
<div style="display:none;">Click!</div>
 
<script>
function aClick() {
  $( "div" ).show().fadeOut( "slow" );
}
$( "#bind" ).click(function() {
  $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
});
$( "#unbind" ).click(function() {
  $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
});
</script>
 
</body>
</html>

演示：

要從所有段落中取消綁定所有事件，請編寫：

$( "p" ).unbind();

要解除所有段落中的所有點擊事件的綁定，請編寫：

$( "p" ).unbind( "click" );

要僅取消綁定一個先前綁定的處理程序，請將函數作為第二個參數傳入：

var foo = function() {
  // Code to handle some kind of event
};
 
$( "p" ).bind( "click", foo ); // ... Now foo will be called when paragraphs are clicked ...
 
$( "p" ).unbind( "click", foo ); // ... foo will no longer be called.

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .unbind()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。