jQuery triggerHandler() method

The triggerHandler() method is used to trigger the specified event for the matched element. It works similar to the trigger() method except that the triggerHandler() method does not trigger the default behavior of an event.

Syntax

This method has one mandatory parameter and can have multiple optional parameters.

Parameter Values

event: It is the mandatory parameter. It specifies an event to trigger for the element. It can be a standard event or a custom event.

param1,param2,...: These are optional and additional parameters to be passed as arguments to the event handler. They are useful with custom events.

Let's see some illustrations of using the triggerHandler() method.

Example1

In this example, we are using the triggerHandler() method to trigger the select event. Here, there, are two buttons named as triggerHandler() and trigger(). With this example, we can easily understand the difference between the trigger() and triggerHandler() method.

On clicking the first button, the triggerHandler() method will trigger the specified event that will change the style of body and given textfield. On clicking the second button, the trigger() method will trigger the specified event and also trigger the default behavior of the event.

Here, we are using the mandatory event parameter of the triggerHandler() method.

<!DOCTYPE html>
<html>
<head>
<title> jQuery triggerHandler() method </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#tf").triggerHandler("select");
  });
  $("#btn2").click(function(){
    $("#tf").trigger("select");
  });
    $("#tf").select(function(){
	$("#tf").css({"backgroundColor": "yellow"});
    $("body").css({"backgroundColor": "lightgreen"});
  });
});
</script>
</head>
<body>
<h4> This is an example of using the jQuery trigger() method </h4>
<input id = "tf" type = "text" value = "Text here..."/>
<p> Click the following buttons to see the effect. </p>
<button id = "btn1"> triggerHandler() </button>
<button id = "btn2"> trigger() </button>
</body>
</html>

Test it Now

Output

On clicking the first button, the triggerHandler() method will trigger the specified event but does not trigger the default behavior as shown in the below screenshot -

On clicking the second button, the trigger() method will also trigger the default behavior of the event, as shown in the below screenshot -

Example2

It is another example of using the triggerHandler() method. In this example, we are using the optional parameters of the triggerHandler() method. These additional parameters passed as the arguments to the event handlers.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function () {
 $("button").bind("custom", function(event, id, name, salary){
      alert("Employee ID = " + id + "\nName = " + name + "\nSalary = " + salary);
    });
    
      $("button").triggerHandler("custom", ["E01", "John", "30,000"]);
    });
});
</script>
</head>
<body>
<h4> This is an example of using the jQuery triggerHandler() method. </h4>

<p> Click the below button to see the effect. </p>
<button> Click me </button>
</body>
</html>

Test it Now

Output