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

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

用法 
.trigger( eventType [, extraParameters ] ) => jQuery

說明：執行所有附加到給定事件類型的匹配元素的處理程序和行為。

  • 添加的版本：1.0.trigger( eventType [, extraParameters ] )

    • eventType
      類型：String
      包含 JavaScript 事件類型的字符串，例如 click 或 submit 。
    • extraParameters
      類型：Array 或 PlainObject
      要傳遞給事件處理程序的附加參數。

  • 添加的版本：1.3.trigger( event [, extraParameters ] )

當相應的事件發生時，將觸發任何帶有.on() 或其快捷方法之一的事件處理程序。但是，可以使用.trigger() 方法手動觸發它們。對.trigger() 的調用以與用戶自然觸發事件相同的順序執行處理程序：

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

從 jQuery 1.3 開始，.trigger() ed 事件在 DOM 樹中冒泡；事件處理程序可以通過從處理程序返回 false 或在傳遞給事件的事件對象上調用 .stopPropagation() 方法來停止冒泡。盡管.trigger() 模擬事件激活，並帶有合成的事件對象，但它並不能完美地複製naturally-occurring 事件。

要觸發通過 jQuery 綁定的處理程序而不觸發本機事件，請改用 .triggerHandler() 。

當我們使用.on() 方法定義自定義事件類型時，.trigger() 的第二個參數會變得有用。例如，假設我們已將 custom 事件的處理程序綁定到我們的元素，而不是像我們上麵所做的那樣內置 click 事件：

$( "#foo" ).on( "custom", function( event, param1, param2 ) {
  alert( param1 + "\n" + param2 );
});
$( "#foo").trigger( "custom", [ "Custom", "Event" ] );

事件對象總是作為第一個參數傳遞給事件處理程序。參數數組也可以傳遞給 .trigger() 調用，這些參數也將在事件對象之後傳遞給處理程序。從 jQuery 1.6.2 開始，可以傳遞單個字符串或數字參數而不用包裝在數組中。

請注意此處傳遞的額外參數與 .on() 方法的 eventData 參數之間的區別。兩者都是將信息傳遞給事件處理程序的機製，但.trigger() 的extraParameters 參數允許在觸發事件時確定信息，而.on() 的eventData 參數要求信息已經在綁定處理程序時計算。

.trigger() 方法可用於包裝普通 JavaScript 對象的 jQuery 集合，類似於發布/訂閱機製；觸發事件時將調用綁定到對象的任何事件處理程序。

注意：對於普通對象和 DOM 對象，除了window，如果觸發的事件名稱與對象上的屬性名稱匹配，則如果沒有事件處理程序調用，jQuery 將嘗試將該屬性作為方法調用event.preventDefault().如果不需要此行為，請使用.triggerHandler()反而。
注意：與.triggerHandler(), 調用時.trigger()事件名稱與對象上的屬性名稱匹配，前綴為on(例如觸發click在window有一個非空onclick方法)，jQuery 將嘗試將該屬性作為方法調用。
注意：當使用不是 array-like 但仍包含length屬性，您應該在數組中傳遞對象(例如[ { length: 1 } ])。

例子：

點擊按鈕 #2 也會觸發點擊按鈕 #1。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>trigger demo</title>
  <style>
  button {
    margin: 10px;
  }
  div {
    color: blue;
    font-weight: bold;
  }
  span {
    color: red;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
 
<button>Button #1</button>
<button>Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
 
<script>
$( "button" ).first().click(function() {
  update( $( "span" ).first() );
});
 
$( "button" ).last().click(function() {
  $( "button" ).first().trigger( "click" );
  update( $( "span" ).last() );
});
 
function update( j ) {
  var n = parseInt( j.text(), 10 );
  j.text( n + 1 );
}
</script>
 
</body>
</html>

演示：

要在不使用 submit() 函數的情況下提交第一個表單，請嘗試：

$( "form" ).first().trigger( "submit" );

要在不使用 submit() 函數的情況下提交第一個表單，請嘗試：

var event = jQuery.Event( "submit" );
$( "form" ).first().trigger( event );
if ( event.isDefaultPrevented() ) {
  // Perform an action...
}

將任意數據傳遞給事件：

$( "p" )
  .click(function( event, a, b ) {
    // When a normal click fires, a and b are undefined
    // for a trigger like below a refers to "foo" and b refers to "bar"
  })
  .trigger( "click", [ "foo", "bar" ] );

通過事件對象傳遞任意數據：

var event = jQuery.Event( "logged" );
event.user = "foo";
event.pass = "bar";
$( "body" ).trigger( event );

通過事件對象傳遞數據的另一種方法：

$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});

相關用法


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