Detailed explanation of jQuery.triggerHandler() function

triggerHandler() function is used to trigger an event of the specified type on each matching element.

In addition, you can also pass in additional parameters to the event handling function when the event is triggered.

The function of this function is similar to the trigger() function, but the triggerHandler() function has the following exceptions:

triggerHandler() will not trigger the default behavior of the execution element (such as the default link click event Jump behavior, default submission behavior of form submit event).

triggerHandler() triggers events only for the first matching element in the jQuery object.

Events triggered by triggerHandler() do not bubble up in the DOM tree, so the event does not bubble up to any of its ancestor elements.

The return value of triggerHandler() is the return value of the corresponding event processing function, not the current jQuery object itself.

This function belongs to the jQuery object (instance).

Syntax

jQuery 1.2 Added this function.

jQueryObject.triggerHandler( events [, extraArguments ] )

Parameters

Parameter Description

events String type specifies the event type and optional Namespace, such as "click", "focus", "keydown.myPlugin".

extraArguments Optional/Object type is the extra parameters passed in by the event processing function. If you want to pass in multiple parameters, please pass them in as an array.

ThetriggerHandler() function will pass in a default parameter for the event processing function that triggers execution, which is the Event object representing the current event.

The parameter extraArguments is used to pass in more additional parameters to the event handling function. If extraArguments is in array form, each element will serve as a parameter to the function.

Return value

The return value of the triggerHandler() function is of any type and returns the return value of the event processing function that triggered execution.

Example & Description

Please refer to the following initial HTML code:

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

First, we bind events to the above button and 3499910bf9dac5ae3c52d5ede7383485 elements, and then use triggerHandler () function directly triggers events, the corresponding code is as follows:

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

Running code (please copy other codes to the demo page to run)

triggerHandler() function can also handle functions based on incoming events Event object to trigger the corresponding 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

The above is the detailed content of Detailed explanation of jQuery.triggerHandler() function. For more information, please follow other related articles on the PHP Chinese website!