jQuery.trigger() 函數詳解

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

此外，你還可以在觸發事件時為事件處理函數傳入額外的參數。

使用函數可以手動觸發執行元素上綁定的事件處理函數，也會觸發執行該元素的預設行為。

以表單元素

為例，使用trigger("submit")可以觸發該表單綁定的submit事件，也會執行表單submit事件的預設行為－表單提交操作。

根據網友@飛揚的回饋，連結標籤的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和元素綁定事件，然後使用trigger ()函數直接觸發事件，對應的程式碼如下：

var $log = $("#log");
function handler( event, arg1, arg2 ){
    var html = &#39;<br>触发元素#&#39; + this.id + &#39;的[&#39; + event.type +&#39;]事件，额外的函数参数为:&#39; + arg1 + &#39;, &#39; + 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

以上是jQuery.trigger() 函數詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！