.trigger()

分類：事件 > 事件處理常式附加

.trigger( eventType [, extraParameters ] )傳回：jQuery

說明：執行附加到已配對元素的所有處理常式和行為，以取得指定的事件類型。

任何附加有 .on() 或其捷徑方法的事件處理常式，都會在對應的事件發生時觸發。不過，它們可以使用 .trigger() 方法手動觸發。呼叫 .trigger() 會以與使用者自然觸發事件時相同的順序執行處理常式

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

從 jQuery 1.3 開始，.trigger() 觸發的事件會在 DOM 樹中冒泡；事件處理常式可以透過從處理常式傳回 false 或呼叫傳遞至事件中事件物件的 .stopPropagation() 方法來停止冒泡。儘管 .trigger() 模擬事件啟動，並附帶一個合成的事件物件，但它並未完美複製自然發生的事件。

若要觸發透過 jQuery 繫結的處理常式，但同時不觸發原生事件，請改用 .triggerHandler()。

當我們使用 .on() 方法定義自訂事件類型時，.trigger() 的第二個引數可能會變得有用。例如，假設我們已將 custom 事件的處理常式繫結至我們的元素，而不是像上面那樣繫結至內建的 click 事件

1
2
3
4
 
$( "#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），如果觸發的事件名稱與物件上屬性的名稱相符，則如果沒有事件處理常式呼叫 event.preventDefault()，jQuery 會嘗試呼叫該屬性作為方法。如果不需要這種行為，請改用 .triggerHandler()。
注意：與 .triggerHandler() 一樣，當使用與物件上屬性的名稱相符的事件名稱呼叫 .trigger()，並加上 on 前綴（例如在具有非 null onclick 方法的 window 上觸發 click），jQuery 會嘗試呼叫該屬性作為方法。
注意：當使用不是陣列類型但仍包含 length 屬性的純物件觸發時，您應該將物件傳遞到陣列中（例如 [ { length: 1 } ]）。

範例

按鈕 #2 的按鍵也會觸發按鈕 #1 的按鍵。

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
42
43
44
 
<!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.7.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().on( "click", function() {
  update( $( "span" ).first() );
} );
 
$( "button" ).last().on( "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() 函數，請嘗試

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

若要提交第一個表單而不用 submit() 函數，請嘗試

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

傳遞任意資料到事件

1
2
3
4
5
6
 
$( "p" )
  .on( "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" ] );

傳遞任意資料透過事件物件

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

傳遞資料透過事件物件的另一種方式

1
2
3
4
5
 
$( "body" ).trigger({
  type:"logged",
  user:"foo",
  pass:"bar"
});