.bind()

從 jQuery 3.0 開始，.bind() 已被棄用。自 jQuery 1.7 以來，它已被 .on() 方法取代，用於將事件處理常式附加到文件，因此已不建議使用。對於早期版本，.bind() 方法用於將事件處理常式直接附加到元素。處理常式附加到 jQuery 物件中目前選取的元素，因此這些元素必須存在於呼叫 .bind() 的點。如需更靈活的事件繫結，請參閱 .on() 中關於事件委派的討論。

任何字串都適用於 eventType；如果字串不是原生 DOM 事件的名稱，則處理常式會繫結到自訂事件。這些事件絕不會由瀏覽器呼叫，但可以使用 .trigger() 或 .triggerHandler() 從其他 JavaScript 程式碼手動觸發。

如果 eventType 字串包含一個句點 (.) 字元，則事件會命名空間化。句點字元會將事件與其命名空間分開。例如，在呼叫 .bind( "click.name", handler ) 中，字串 click 是事件類型，而字串 name 是命名空間。命名空間化讓我們可以在不影響其他事件的情況下解除繫結或觸發某種類型的部分事件。有關更多資訊，請參閱 .unbind() 的討論。

有些事件有專屬頁面，說明其使用方式的具體事項。有關這些事件的完整清單，請參閱 事件類別。

當事件到達元素時，會觸發繫結至該元素的該事件類型的所有處理常式。如果註冊了多個處理常式，它們將永遠按照繫結順序執行。在所有處理常式執行完畢後，事件會繼續沿著正常的事件傳播路徑進行。

.bind() 的基本使用方式為

$( "#foo" ).bind( "click", function() {
  alert( "User clicked on 'foo.'" );
});

這段程式碼會讓 ID 為 foo 的元素回應 click 事件。此後，當使用者按一下此元素內部時，就會顯示警示。

多個事件

可以透過包含每個事件類型（以空白分隔）來一次繫結多個事件類型

$( "#foo" ).bind( "mouseenter mouseleave", function() {
  $( this ).toggleClass( "entered" );
});

這對 <div id="foo">（當它最初沒有「已輸入」類別時）的效果是在滑鼠進入 <div> 時加入「已輸入」類別，而在滑鼠離開時移除類別。

從 jQuery 1.4 開始，我們可以透過傳遞事件類型/處理常式配對的物件來同時繫結多個事件處理常式

$( "#foo" ).bind({
  click: function() {
    // Do something on click
  },
  mouseenter: function() {
    // Do something on mouseenter
  }
});

事件處理常式

handler 參數會採用一個回呼函式，如上所示。在處理常式中，關鍵字 this 指的是處理常式繫結到的 DOM 元素。若要在 jQuery 中使用元素，可以將它傳遞給正常的 $() 函式。例如

$( "#foo" ).bind( "click", function() {
  alert( $( this ).text() );
});

執行此程式碼後，當使用者按一下 ID 為 foo 的元素內部時，其文字內容會以警示方式顯示。

從 jQuery 1.4.2 開始，可以將重複的事件處理常式繫結到元素，而不是捨棄。當使用事件資料功能，或當其他獨特資料存在於事件處理常式函式的封閉中時，這會很有用。

在 jQuery 1.4.3 中，您現在可以在事件處理常式的位置傳入 false。這會繫結一個等於 function(){ return false; } 的事件處理常式。此函式可以在稍後透過呼叫 .unbind( eventName, false ) 移除。

事件物件

handler 回呼函式也可以使用參數。當函式被呼叫時，事件物件會傳遞給第一個參數。

事件物件通常是不必要的，而參數會省略，因為在處理常式繫結時，通常有足夠的內容可得知在處理常式觸發時需要執行哪些動作。然而，有時需要在事件啟動時收集更多有關使用者環境的資訊。檢視完整的事件物件。

從處理常式傳回 false 等於在事件物件上同時呼叫 .preventDefault() 和 .stopPropagation()。

在處理常式中使用事件物件如下所示

$( document ).ready(function() {
  $( "#foo" ).bind( "click", function( event ) {
    alert( "The mouse cursor is at (" +
      event.pageX + ", " + event.pageY +
      ")" );
  });
});

請注意新增至匿名函式的參數。此程式碼會導致按一下 ID 為 foo 的元素時，回報按一下時滑鼠游標的頁面座標。

傳遞事件資料

選用的 eventData 參數並不常用。提供時，此參數允許我們傳遞額外的資訊給處理常式。此參數的一個便利用途是解決由封閉所造成的議題。例如，假設我們有兩個事件處理常式，兩個都參考相同的外部變數

var message = "Spoon!";
$( "#foo" ).bind( "click", function() {
  alert( message );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", function() {
  alert( message );
});

因為處理函式是封閉函式，且兩個函式在環境中都有 message，因此觸發時兩個函式都會顯示訊息 Not in the face!。變數值已變更。為了解決此問題，我們可以使用 eventData 傳遞訊息

var message = "Spoon!";
$( "#foo" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});
message = "Not in the face!";
$( "#bar" ).bind( "click", {
  msg: message
}, function( event ) {
  alert( event.data.msg );
});

這次處理函式中未直接參照變數；而是透過 eventData 以依值傳遞的方式傳遞變數，這會在繫結事件時修正值。第一個處理函式現在會顯示 Spoon!，而第二個處理函式會警告 Not in the face!

如果存在 eventData，它會是 .bind() 方法的第二個引數；如果不需要將其他資料傳送給處理函式，則會將回呼傳遞為第二個且最後一個引數。

從 jQuery 1.4 開始，我們無法再將資料（因此，也無法將事件）附加到物件、嵌入或 applet 元素，因為將資料附加到 Java applet 時會發生重大錯誤。

注意：儘管在下一範例中有示範，但建議不要將處理函式繫結到同一個元素的 click 和 dblclick 事件。觸發的事件順序會因瀏覽器而異，有些瀏覽器會在 dblclick 之前收到兩個 click 事件，而其他瀏覽器只會收到一個。雙擊靈敏度（偵測為雙擊的兩次點擊之間的最大時間）會因作業系統和瀏覽器而異，而且通常使用者可以設定。