jquery 中的trigge函式詳解

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
*/

執行程式碼(以下程式碼請自行復制到演示頁面執行)

trigger()函式還可以根據傳入事件處理函式的Event物件，來觸發對應的事件。

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

// 為btn1元素的click事件繫結事件處理函式
$btn1.bind( "click", function(event){
    alert("click1");    
});

// 為btn1元素的click事件繫結事件處理函式
// 如果傳入了一個有效的額外引數，則再次觸發click
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});

// $btn1.trigger( "click" ); // 呼叫一次click1、呼叫一次click2

$btn1.trigger( "click", true ); // 呼叫兩次click1、呼叫兩次click2

此外，trigger()函式還可以只觸發包含指定定名稱空間的事件(1.4.3+才支援名稱空間)。

function A( event ){
    alert( 'A' );
}
function B( event ){
    alert( 'B' );
}
function C( event ){
    alert( 'C' );
}

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

// 為btn1元素的click事件繫結事件處理函式
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );


// 觸發btn1的click事件，不限定名稱空間
$btn1.trigger("click"); // 觸發A、B、C

// 觸發btn1的包含名稱空間foo的click事件
$btn1.trigger("click.foo"); // 觸發A、B

// 觸發btn1的包含名稱空間test的click事件
$btn1.trigger("click.test"); // 觸發B、C

// 觸發btn1的同時包含名稱空間foo和test的click事件
$btn1.trigger("click.foo.test"); // 觸發B