jQuery.trigger() 函數詳解

trigger()函數用於在每一個匹配元素上觸發指定類型的事件。

此外，你還能夠在觸發事件時爲事件處理函數傳入額外的參數。

使用該函數能夠手動觸發執行元素上綁定的事件處理函數，也會觸發執行該元素的默認行爲。

以表單元素<form>爲例，使用trigger("submit")能夠觸發該表單綁定的submit事件，也會執行表單submit事件的默認行爲——表單提交操做。

根據網友 @飛揚 的反饋，連接標籤<a>的trigger("click")是一個特例，不會觸發連接click事件的默認行爲——跳轉到對應連接的操做，點此查看相關詳情。

從jQuery 1.3開始，trigger()函數觸發的事件還支持事件冒泡，能夠冒泡傳遞到DOM樹上。

該函數屬於jQuery對象(實例)。

語法

trigger()函數主要有如下兩種形式的用法：

用法一：

jQueryObject.trigger( events [, extraArguments ] )

在每一個匹配元素上觸發指定類型(events)的事件，並可爲事件處理函數傳入額外的參數(extraArguments)。

用法二：jQuery 1.3 新增支持該用法。

jQueryObject.trigger( eventObject [, extraArguments ] )

爲指定事件處理函數傳入的Event對象(eventObject)，用於觸發執行對應的事件處理函數，並可爲事件處理函數傳入額外的參數(extraArguments)。

參數

參數	描述
events	String類型指定的事件類型和可選的命名空間，例如"click"、 "focus"、 "keydown.myPlugin"。
extraArguments	可選/Object類型爲事件處理函數傳入的額外參數。若是要傳入多個參數，請以數組方式傳入。
eventObject	Object類型一個Event對象，用於觸發傳入該對象的事件處理函數。

trigger()函數會爲觸發執行的事件處理函數傳入一個默認參數，也就是表示當前事件的Event對象。

參數extraArguments用於爲事件處理函數傳入更多額外的參數。若是extraArguments是數組形式，則每一個元素都將充當函數的參數。

返回值

trigger()函數的返回值爲jQuery類型，返回當前jQuery對象自己。

示例&說明

請參考下面這段初始HTML代碼：

<input id="btn1" type="button" value="點擊1" />
<input id="btn2" type="button" value="點擊2" />
<a id="a1" href="#">CodePlayer</a>
<div id="log"></div>

首先，咱們爲上述button和<a>元素綁定事件，而後使用trigger()函數直接觸發事件，相應的代碼以下：

var $log = $("#log");

function handler( event, arg1, arg2 ){
    var html = '<br>觸發元素#' + this.id + '的[' + event.type +']事件，額外的函數參數爲:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// 爲全部button元素的click事件綁定事件處理函數
$buttons.bind( "click", handler );

// 爲全部a元素的click、mouseover、mouseleave事件綁定事件處理函數
$("a").bind( "click mouseover mouseleave", handler );


// 觸發全部button的click事件
$buttons.trigger("click"); 
/*(追加文本)
觸發元素#btn1的[click]事件，額外的函數參數爲:undefined, undefined
觸發元素#btn2的[click]事件，額外的函數參數爲:undefined, undefined
*/


$("#btn1").trigger("click", "CodePlayer");
/*(追加文本)
觸發元素#btn1的[click]事件，額外的函數參數爲:CodePlayer, undefined
*/

// arg1 = "張三"， arg2 = 20
$("a").trigger("mouseover", ["張三", 20 ] );
/*(追加文本)
觸發元素#a1的[mouseover]事件，額外的函數參數爲:張三, 20
*/


$("a").trigger("mouseleave", { name: "張三", age: 18 } );
/*(追加文本)
觸發元素#a1的[mouseleave]事件，額外的函數參數爲:[object Object], undefined
*/