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

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


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

不推薦使用的版本：3.0

說明：將處理程序附加到元素的事件。

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

    • eventType
      類型：String
      包含一種或多種 DOM 事件類型的字符串，例如 "click" 或 "submit," 或自定義事件名稱。
    • eventData
      類型：Anything
      包含將傳遞給事件處理程序的數據的對象。
    • handler
      類型：Function(Event eventObject)
      每次觸發事件時執行的函數。

  • 添加的版本：1.4.3.bind( eventType [, eventData ] [, preventBubble ] )

    • eventType
      類型：String
      包含一種或多種 DOM 事件類型的字符串，例如 "click" 或 "submit," 或自定義事件名稱。
    • eventData
      類型：Anything
      包含將傳遞給事件處理程序的數據的對象。
    • preventBubble
      類型：Boolean
      將第三個參數設置為 false 將附加一個阻止默認操作發生並阻止事件冒泡的函數。默認值為真。

  • 添加的版本：1.4.bind( events )

    • events
      類型：Object
      一個對象，包含一個或多個 DOM 事件類型和為它們執行的函數。

從 jQuery 3.0 開始，.bind() 已被棄用。自 jQuery 1.7 起，它已被用於將事件處理程序附加到文檔的 .on() 方法取代，因此不鼓勵使用它。對於早期版本，.bind() 方法用於將事件處理程序直接附加到元素。處理程序附加到 jQuery 對象中當前選定的元素，因此這些元素 must exist 在調用 .bind() 時發生。如需更靈活的事件綁定，請參閱 .on() 中關於事件委托的討論。

eventType 的任何字符串都是合法的；如果字符串不是本機 DOM 事件的名稱，則處理程序將綁定到自定義事件。這些事件永遠不會被瀏覽器調用，但可以使用 .trigger() 或 .triggerHandler() 從其他 JavaScript 代碼手動觸發。

如果 eventType 字符串包含句點 (.) 字符，則事件是命名空間的。句點字符將事件與其命名空間分開。例如，在調用 .bind( "click.name", handler ) 中，字符串 click 是事件類型，字符串 name 是命名空間。命名空間允許我們解除綁定或觸發某種類型的某些事件，而不會影響其他事件。有關更多信息，請參閱.unbind() 的討論。

有一些標準瀏覽器事件的速記方法，例如 .click() ，可用於附加或觸發事件處理程序。有關速記方法的完整列表，請參閱events category。

當一個事件到達一個元素時，所有綁定到該元素的事件類型的處理程序都會被觸發。如果注冊了多個處理程序，它們將始終按照它們被綁定的順序執行。在所有處理程序都執行後，事件將沿著正常的事件傳播路徑繼續。

.bind() 的基本用法是：

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

此代碼將導致 ID 為 foo 的元素響應 click 事件。此後，當用戶在此元素內單擊時，將顯示警報。

多個事件

多個事件類型可以一次綁定，每個事件類型之間用空格分隔：

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

這對<div id="foo"> 的影響(當它最初沒有"entered" 類時)是在鼠標進入<div> 時添加"entered" 類並在鼠標離開時刪除該類。

從 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 回調函數也可以帶參數。當函數被調用時，事件對象將被傳遞給第一個參數。

事件對象通常是不必要的並且參數被省略，因為當處理程序必須確切知道觸發處理程序時需要做什麽時，通常有足夠的上下文可用。但是，有時有必要在事件開始時收集有關用戶環境的更多信息。 View the full Event Object 。

從處理程序返回 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在他們的環境中，兩者都會顯示消息不是在臉上！觸發時。變量的值已更改。為了回避這一點，我們可以在使用中傳遞消息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 );
});

這次在處理程序中不直接引用變量；相反，變量被傳入by value通過eventData，它固定事件綁定時的值。現在將顯示第一個處理程序勺子！而第二個會提醒不是在臉上！

請注意，對象被傳遞給函數 by reference ，這使這種情況更加複雜。

如果存在eventData，則它是.bind() 方法的第二個參數；如果不需要向處理程序發送其他數據，則回調作為第二個也是最後一個參數傳遞。

請參閱.trigger() 方法參考，了解在事件發生時而不是在綁定處理程序時將數據傳遞給處理程序的方法。

從 jQuery 1.4 開始，我們不能再將數據(以及事件)附加到對象、嵌入或小程序元素，因為在將數據附加到 Java 小程序時會發生嚴重錯誤。

注意：盡管在下一個示例中進行了演示，但不建議將處理程序綁定到兩個click和dblclick相同元素的事件。觸發的事件順序因瀏覽器而異，有些會在觸發之前接收兩個點擊事件dblclick其他隻有一個。雙擊敏感度(檢測為雙擊的兩次單擊之間的最長時間)可能因操作係統和瀏覽器而異，通常為 user-configurable。

例子：

句柄單擊並雙擊該段落。注意：坐標是相對於窗口的，所以在這種情況下相對於演示 iframe。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    background: yellow;
    font-weight: bold;
    cursor: pointer;
    padding: 5px;
  }
  p.over {
     background: #ccc;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Click or double click here.</p>
<span></span>
 
<script>
$( "p" ).bind( "click", function( event ) {
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $( "span" ).text( "Click happened! " + str );
});
$( "p" ).bind( "dblclick", function() {
  $( "span" ).text( "Double-click happened in " + this.nodeName );
});
$( "p" ).bind( "mouseenter mouseleave", function( event ) {
  $( this ).toggleClass( "over" );
});
</script>
 
</body>
</html>

演示：

要在每次單擊時在警報框中顯示每個段落的文本：

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

您可以在事件處理程序之前傳遞一些額外的數據：

function handler( event ) {
  alert( event.data.foo );
}
$( "p" ).bind( "click", {
  foo: "bar"
}, handler );

通過返回 false 取消默認操作並防止其冒泡：

$( "form" ).bind( "submit", function() {
  return false;
})

使用 .preventDefault() 方法僅取消默認操作。

$( "form" ).bind( "submit", function( event ) {
  event.preventDefault();
});

使用 .stopPropagation() 方法在不阻止默認操作的情況下阻止事件冒泡。

$( "form" ).bind( "submit", function( event ) {
  event.stopPropagation();
});

綁定自定義事件。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>bind demo</title>
  <style>
  p {
    color: red;
  }
  span {
    color: blue;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display: none;"></span>
 
<script>
$( "p" ).bind( "myCustomEvent", function( e, myName, myValue ) {
  $( this ).text( myName + ", hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).click(function() {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});
</script>
 
</body>
</html>

演示：

同時綁定多個事件。

$( "div.test" ).bind({
  click: function() {
    $( this ).addClass( "active" );
  },
  mouseenter: function() {
    $( this ).addClass( "inside" );
  },
  mouseleave: function() {
    $( this ).removeClass( "inside" );
  }
});

相關用法


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