jQuery.triggerHandler() 函數詳解

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

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

該函數的作用於trigger()函數相似，但triggerHandler()函數具有以下例外：

triggerHandler()不會觸發執行元素的預設行為(例如連結click事件默認的跳轉行為，表單submit事件預設的提交行為)。

triggerHandler()觸發事件只針對jQuery物件中的第一個匹配元素。

triggerHandler()觸發的事件不會在DOM樹中冒泡，因此事件不會冒泡傳遞到它的任何祖輩元素。

triggerHandler()的傳回值是對應事件處理函數的回傳值，而不是目前jQuery物件本身。

此函數屬於jQuery物件(實例)。

語法

jQuery 1.2 新增此函數。

jQueryObject.triggerHandler( events [, extraArguments ] )

參數

參數 描述

events String類型指定的事件類型和可選的命名空間，例如"click"、"focus"、"keydown.myPlugin"。

extraArguments 可選/Object類型為事件處理函數傳入的額外參數。如果要傳入多個參數，請以陣列方式傳入。

triggerHandler()函數會為觸發執行的事件處理函數傳入一個預設參數，也就是表示目前事件的Event物件。

參數extraArguments用於為事件處理函數傳入更多額外的參數。如果extraArguments是陣列形式，則每個元素都將充當函數的參數。

傳回值

triggerHandler()函數的傳回值為任意類型，傳回觸發執行的事件處理函數的回傳值。

範例&說明

請參考下面這段初始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和元素綁定事件，然後使用triggerHandler ()函數直接觸發事件，對應的程式碼如下：

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 );
// 触发btn1的click事件
// 虽然$buttons匹配两个button元素，但只会触发第一个匹配元素的click事件
$buttons.triggerHandler("click");
/*(追加文本)
触发元素#btn1的[click]事件，额外的函数参数为:undefined, undefined
*/
$("#btn2").triggerHandler("click", "CodePlayer");
/*(追加文本)
触发元素#btn2的[click]事件，额外的函数参数为:CodePlayer, undefined
*/
// arg1 = "张三"， arg2 = 20
$("a").triggerHandler("mouseover", ["张三", 20 ] );
/*(追加文本)
触发元素#a1的[mouseover]事件，额外的函数参数为:张三, 20
*/
$("a").triggerHandler("mouseleave", { name: "张三", age: 18 } );
/*(追加文本)
触发元素#a1的[mouseleave]事件，额外的函数参数为:[object Object], undefined
*/

執行程式碼(其他程式碼請自行複製到示範頁面執行)

triggerHandler()函數也可以根據傳入事件處理函數的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).triggerHandler( event );
});
// $btn1.triggerHandler( "click" ); // 调用一次click1、调用一次click2
$btn1.triggerHandler( "click", true ); // 调用两次click1、调用两次click2
此外，triggerHandler()函数还可以只触发包含指定定命名空间的事件(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.triggerHandler("click"); // 触发A、B、C
// 触发btn1的包含命名空间foo的click事件
$btn1.triggerHandler("click.foo"); // 触发A、B
// 触发btn1的包含命名空间test的click事件
$btn1.triggerHandler("click.test"); // 触发B、C
// 触发btn1的同时包含命名空间foo和test的click事件
$btn1.triggerHandler("click.foo.test"); // 触发B

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