jQuery triggerHandler() Method

jQuery | triggerHandler() Method: Learn about the jQuery triggerHandler() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 01, 2022

triggerHandler() Method

Events in jQuery are the actions that the user performs on the web page. It can be anything – related to mouse clicks, keyboard presses, etc. Using jQuery, we can control these events in the order we want and can also attach some custom functions to it if needed. That means, we can use predefined event methods for the actions and also define a function that gets fired when the event method is triggered. Overall, this makes the website more dynamic on the user's end. Let's learn about the triggerHandler() method here.

The triggerHandler() method is a built-in jQuery method. The triggerHandler() method, when executed, triggers the event handler for the element selected. For example: if the event is 'select', then triggerHandler() method will execute the function for this event.

Unlike the trigger() method in jQuery, triggerHandler() does not trigger the default behavior event for the selected element.

triggerHandler() Method Syntax

$('selector').triggerHandler(event, parameter_1, parameter_2, ...);

It takes the following parameters:

  • The event, required, has to be specified for triggering it for the element.
  • parameters are optional and can be passed to an event handler.

The following example explains the implementation of the triggerHandler() method precisely. When the trigger button is clicked, it calls the select() method which further executes the replaceWith() method attached to it.

jQuery triggerHandler() Method Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery Event - Trigger Handler</h2>
    <p>Click the button to trigger the event handler after writting something in the input box.</p>
    <button>Trigger Handler</button>
    <hr>
    <h4 style="color:darkblue">Welcome to Include Help !</h4>
    <p>This is a jQuery Tutorial for Event Methods.</p>
    <h4 style="color:darkblue">Thanks for visiting !</h4>
    Name: <input type="text">
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('input').select(function(){
            $(this).replaceWith('Value Inserted');
        });
    
        $('button').click(function(){
            $('input').triggerHandler('select');
        });
    });
  </script>
</html>

Output:

Example 1: jQuery triggerHandler() Method
ADVERTISEMENT
ADVERTISEMENT




Comments and Discussions!




Languages: » C » C++ » C++ STL » Java » Data Structure » C#.Net » Android » Kotlin » SQL
Web Technologies: » PHP » Python » JavaScript » CSS » Ajax » Node.js » Web programming/HTML
Solved programs: » C » C++ » DS » Java » C#
Aptitude que. & ans.: » C » C++ » Java » DBMS
Interview que. & ans.: » C » Embedded C » Java » SEO » HR
CS Subjects: » CS Basics » O.S. » Networks » DBMS » Embedded Systems » Cloud Computing
» Machine learning » CS Organizations » Linux » DOS
More: » Articles » Puzzles » News/Updates

© https://www.includehelp.com some rights reserved.