jQuery Event trigger() Method

The jQuery event trigger() method is used to trigger the specified event handler on the selected element. Using this method you can manually invoke the event handler that is attached to an element.

It is quite similar to the triggerHandler() method, but the difference is that the triggerHandler() does not trigger the default behavior of the event, whereas the trigger() method does, and also you can pass the additional parameter to the trigger() method.

Syntax

Following is the syntax of the jQuery event trigger() method −

$(selector).trigger(event, param1, param2,....)

Parameters

This method accepts an event and optional parameters such as 'param1', 'param2', …, and 'params', which are described below −

event − The event to trigger (that can be a custom event or a standard event like "click" or "submit").
param1, param2,.... − It is an optional additional parameters to pass to the event handler.

Return Value

This method does not have any return value.

Example 1

The following is the basic example of the jQuery event trigger() method −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 200px;
        background-color: green;
        color: white;
        padding: 10px;
    }
</style>
</head>
<body>
    <p>Click on the below text</p>
    <div>TutorialsPoint</div>
    <script>
        $('div').click(function(){
           alert("Click event triggered")
        });
        $('div').trigger("click");
    </script>
</body>
</html>

Output

The above program displays a message, and when the user clicks on it, a click event is triggered, and a pop-up alert appears on the browser screen −

When a user clicks on the displayed message −

Example 2

Following is another example of the jQuery event trigger() method. We use a "focus" event to get auto-focused on the input field once the page is loaded −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
    div{
        width: 300px;
        background-color: green;
        color: white;
        padding: 20px;
    }
    input{
        padding: 10px;
        width: 90%;
        margin: 0px auto;
        display: flex;
    }
</style>
</head>
<body>
   <p>The below input field within the div element automatically gets focus when the page is loaded.</p>
    <div>
        <input type="text" >
    </div>
    <script>
        $('input').trigger("focus");
    </script>
</body>
</html>

Output

After executing the above program, it displayed an auto-focused input field as −

Example

In this example, we will create a custom event called "custEvent" and pass additional parameters to its event handler −

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>

</style>
</head>
<body>
    <button>Click me!</button>
    <script>
        $(document).ready(function() {
            $('button').on("custEvent", function(event, p1, p2){
              document.write("Custom event triggered with params: ", p1, p2);
            });
            $('button').trigger("custEvent", ["Hello", "TP Family"]);
        });
    </script>
</body>
</html>

Output

Once the above program is executed, it displays a message with the additional parameter values as −

jquery_ref_events.htm

Print Page