EVENTS - triggerHandler()

The triggerHandler() Event is almost similar to the trigger() event. i.e. It can trigger any event specified.

Just that it doesn't trigger default event.

Let us simplify with the below example,

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	Click on the below button to get focus : <input type = "text">  <br/><br/>	
        <button> Click Here </button>    

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      	
        	$("input").focus( function() {
      			$(this).css("background-color", "yellow")
      		});
            
      		$("button").click( function() {
				$('input').triggerHandler("focus");
			});	
            
      	</script>      
  	</body>
</html>

Output :

So, if you look at the above code, there is an <input> element of type text.

<input type = "text">

And a <button>,

<button> Click Here </button>

Now, all we want is, on button click, we want the color of the <input> element to be changed to yellow.

And that happens with the below JQuery statement.

$("input").focus( function() {
	$(this).css("background-color", "yellow")
});

$("button").click( function() {
	$('input').triggerHandler("focus");
});

So, on button click, the click() event gets triggered,

$('button').click(...);

And the anonymous function gets executed,

function() {
	$('input').triggerHandler("focus");
}

Where the triggerHandler() event locates the <input> element and executes the other JQuery statement.

$("input").focus( function() {
	$(this).css("background-color", "yellow")
});

Where the color of the <input> element is changed.

Note : Just note that for 'triggerHandler()' event, just the color of the <input> element is changed but doesn't gets focus. Whereas for 'trigger()' event the color gets changed as well as the <input> element gets focus.

Let us see how triggerHandler() and trigger() event works for the above example.

Example :

<html>
  	<head>
    	<title> My First Programme </title>
  	</head>

  	<body>
    	<h1> JQuery </h1>
    	
    	Click on the below button to get focus : <input type = "text">  <br/><br/>	
        <button class = "myClass1"> Click Here for triggerHandler event </button>  
        <button class = "myClass2"> Click Here for trigger event </button>    

      	<script src = "https://cdnjs.cloudflare.com/ajax/libs/JQUERY/3.3.1/jquery.min.js"> </script>
	  
      	<script>
      	
        	$("input").focus( function() {
      			$(this).css("background-color", "yellow")
      		});
            
      		$("button.myClass1").click( function() {
				$('input').triggerHandler("focus");
			});	
			
			$("button.myClass2").click( function() {
				$('input').trigger("focus");
			});	
            
      	</script>      
  	</body>
</html>

Output :

You can see the difference. i.e. For triggerHandler() event, just the color of the <input> element is changed but doesn't gets focus. Whereas for trigger() event the color gets changed as well as the <input> element gets focus.

❮❮ PREV NEXT ❯❯