.unbind()

類別： 已棄用 > 已棄用 3.0 | 事件 > 事件處理常式附加

.unbind( eventType [, handler ] )傳回： jQuery已棄用版本： 3.0

說明： 從元素中移除先前附加的事件處理常式。

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

使用 .bind() 繫結的事件處理常式可以用 .unbind() 移除。在最簡單的情況下，.unbind() 在沒有引數的情況下，會移除繫結到元素的所有處理常式

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

此版本會移除所有處理常式，不論類型為何。更精確地說，我們可以傳遞一個事件類型

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

透過指定 click 事件類型，只會解除繫結到該事件類型的處理常式。不過，如果其他腳本可能會將行為繫結到同一個元素，這種方法仍然可能產生負面影響。因此，強固且可擴充的應用程式通常需要使用兩個引數的版本

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

透過命名處理常式，我們可以確保不會意外移除其他函式。請注意，下列程式碼不會執行

1
2
3
4
5
6
7
8
 
$( "#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() 方法的討論中所示，在繫結處理常式時，使用句點 (.) 字元定義名稱空間

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

以這種方式繫結處理常式時，我們仍然可以照常取消繫結

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

但是，如果我們不想影響其他處理常式，我們可以更具體

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

我們也可以取消繫結名稱空間中的所有處理常式，無論事件類型為何

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

當我們開發外掛程式或撰寫可能在未來與其他事件處理程式碼互動的程式碼時，將名稱空間附加到事件繫結特別有用。

使用事件物件

.unbind() 方法的第三種形式用於我們希望從自身內部取消繫結處理常式時。例如，假設我們希望只觸發事件處理常式三次

1
2
3
4
5
6
7
8
 
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 變數，因此即使在處理函式呼叫之間，變數的遞增仍會產生作用。

範例

可以繫結和解除繫結彩色按鈕的事件。

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
 
<!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.7.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" ).on( "click", function() {
  $( "#theone" )
    .bind( "click", aClick )
    .text( "Can Click!" );
});
$( "#unbind" ).on( "click", function() {
  $( "#theone" )
    .unbind( "click", aClick )
    .text( "Does nothing..." );
});
</script>
 
</body>
</html>

示範

若要解除繫結所有段落的全部事件，請撰寫

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

若要解除繫結所有段落的全部點擊事件，請撰寫

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

若要解除繫結先前繫結的單一處理函式，請將函式傳入作為第二個引數

1
2
3
4
5
6
7
 
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.