jQuery.trigger() function usage tutorial

trigger() 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.

Using this function can manually trigger the execution of the event processing function bound to the element, and will also trigger the execution of the default behavior of the element.

Taking the form element

as an example, using trigger("submit") can trigger the submit event bound to the form, and also execute the default behavior of the form submit event - the form submission operation.

According to feedback from netizen @Feiyang, the trigger("click") of the link tag is a special case and will not trigger the default behavior of the link click event - jump to the operation of the corresponding link, click View related details here.

Starting from jQuery 1.3, events triggered by the trigger() function also support event bubbling, which can be bubbled and passed to the DOM tree.

This function belongs to the jQuery object (instance).

Syntax

The trigger() function mainly has the following two forms of usage:

Usage 1:

jQueryObject.trigger( events [, extraArguments ] )

Trigger events of the specified type (events) on each matching element, and can pass in additional parameters (extraArguments) to the event handling function.

Usage 2: jQuery 1.3 newly supports this usage.

jQueryObject.trigger( eventObject [, extraArguments ] )

is the Event object (eventObject) passed in by the specified event processing function, which is used to trigger the execution of the corresponding event processing function and can be used for events The processing function passes in extra parameters (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.

eventObject Object type is an Event object, used to trigger the event processing function passed in to the object.

Thetrigger() 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

trigger()The return value of the function is of jQuery type and returns the current jQuery object itself.

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 elements, and then use trigger () 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 );
// 触发所有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

In addition, the trigger() function can also trigger only events containing a specified namespace (namespaces are supported only in 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

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