The trigger() function is used to trigger a specified type of event on each matching element.

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

Using this function, you can manually trigger the event handler that binds to the execution element, and also trigger the default behavior that executes the element.

Taking form element < form > as an example, trigger("submit") can trigger submit events bound to the form, and also perform the default behavior of form submit events - form submit operation.

According to the feedback from netizens @ Feiyang, trigger("click") with link label < a > is a special case, which does not trigger the default behavior of link click event - jump to the operation of corresponding link, click here to see Relevant details.

Starting with jQuery 1.3, events triggered by the trigger() function also support event bubbles, which can be passed to the DOM tree.

This function belongs to the jQuery object (instance).

grammar

trigger() functions are mainly used in the following two forms:

Usage 1:

jQueryObject.trigger( events [, extraArguments ] )

Events of the specified type are triggered on each matching element, and additional parameters (extraArguments) can be passed into the event handler.

Usage 2: jQuery 1.3 Added support for this usage.

jQueryObject.trigger( eventObject [, extraArguments ] )

The Event Object passed in for the specified event handler is used to trigger the execution of the corresponding event handler and to pass in additional parameters (extraArguments) for the event handler.

parameter

The trigger() function passes in a default parameter for the event handler that triggers execution, that is, the one that represents the current event. Event object.

The parameter extraArguments is used to pass in additional parameters for the event handler function. If extraArguments are in the form of arrays, each element will act as a parameter to the function.

Return value

The trigger() function returns the jQuery type, returning the current jQuery object itself.

Ex amp le & Description

Refer to the following initial HTML code:

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

First, we bind events to the above button and < a > elements, and then trigger events directly using the trigger() function. The corresponding code is as follows:

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

function handler( event, arg1, arg2 ){
    var html = '<br>Trigger element#' + this.id + 'Of[' + event.type +']Events, additional function parameters are:' + arg1 + ', ' + arg2;
    $log.append( html );
}

var $buttons = $(":button");

// Binding event handlers to click events for all button elements
$buttons.bind( "click", handler );

// Binding event handlers for click, mouseover, mouseleave events for all a elements
$("a").bind( "click mouseover mouseleave", handler );


// click events that trigger all button s
$buttons.trigger("click"); 
/*(Additional text)
Trigger element # btn1's [click] event with additional function parameters: undefined, undefined
 Trigger element # btn2's [click] event with additional function parameters: undefined, undefined
*/


$("#btn1").trigger("click", "CodePlayer");
/*(Additional text)
Trigger element # btn1's [click] event with additional function parameters: CodePlayer, undefined
*/

// arg1 = Zhang San, arg2 = 20
$("a").trigger("mouseover", ["Zhang San", 20 ] );
/*(Additional text)
Trigger element #a1 [mouseover] event, additional function parameters are: Zhang San, 20
*/


$("a").trigger("mouseleave", { name: "Zhang San", age: 18 } );
/*(Additional text)
Trigger element # a1's [mouseleave] event with additional function parameters: [object object Object], undefined
*/

Running code (Copy the following code to the demo page to run by yourself)

The trigger() function can also trigger the corresponding event based on the Event object passed into the event handler.

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

// Binding event handlers to click events for btn1 elements
$btn1.bind( "click", function(event){
    alert("click1");    
});

// Binding event handlers to click events for btn1 elements
// If a valid additional parameter is passed in, click is triggered again
$btn1.bind( "click", function(event, arg1){
    alert("click2");
    if(arg1)
        $(this).trigger( event );
});

// $btn1. trigger ("click"); // Call once click1, call once click2

$btn1.trigger( "click", true ); // Call click1 twice, click2 twice

In addition, the trigger() function can only trigger events that contain a specified namespace (1.4.3 + supports namespaces).

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

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

// Binding event handlers to click events for btn1 elements
$btn1.bind( "click.foo.bar", A );
$btn1.bind( "click.test.foo", B );
$btn1.bind( "click.test", C );


// Trigger the click event of btn1 without restricting the namespace
$btn1.trigger("click"); // Trigger A, B, C

// Triggering click events with namespace foo in btn1
$btn1.trigger("click.foo"); // Trigger A, B

// Triggering the click event with namespace test in btn1
$btn1.trigger("click.test"); // Triggering B, C

// click events that trigger btn1 with both namespace foo and test
$btn1.trigger("click.foo.test"); // Trigger B