Updated April 6, 2023
Introduction to jQuery trigger event
In jQuery, an event trigger is defined as using the in-built function for specifying the particular event handler for any selected or matched element for triggering these events where there are various built-in event methods where we can specify in the jQuery for triggering these event methods. In general, event triggering in jQuery is defined as triggering event using a built-in method called trigger() to trigger an event that is specified on every matched element and the event that is specified as a parameter to this function to trigger the event with sometimes providing data to the event handler to trigger the event.
Syntax:
$( selector_tag ).trigger(event, data_for_event_handler);In this article, the above-given syntax is used for built-in function trigger(), which is used for triggering an event for the matched elements. This syntax uses the selector tag for which this function is applied for triggering specified events to the given element. This Syntax uses two parameters, and they are:
- event: this parameter is required to specify within this function. This is considered as an event type or event object for triggering the events for any selected elements.
- data_for_event_handler: This is an optional parameter where we are passing some additional data or parameters to the event handler, which can also be used for custom events.
This function returns the triggered event, which is specified in the parameter as given event type, and the data related to the event handler is also specified within this function.
In jQuery, many different event methods are provided by jQuery for several kinds of events that are handled, and one among these jQuery methods is the trigger() method, which is also used to handle events that are matched or for selected elements.
How to trigger() method works to handle events in jQuery?
In jquery, the trigger()method is a jQuery method for handling events that are triggered using this function, and this function is similar to triggerhandler(), but the difference is it does not trigger any default event as done in the trigger() function. This function working is simple where it is applied on any particular selector tag or element, and then we are specifying some event name and sometimes even the details of event handling also as a parameter to this function. Then this function checks for the event specified and then triggers this event on the specified element for which trigger() function is applied.
Examples of jQuery trigger event
Here are the following examples mention below
Example #1
In this example, let us see how only event parameter is specified in this function:
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of trigger() function in jQuery for triggering events </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$(this).css("background-color", "yellow");
});
$("#btn1").click(function(){
$("input").trigger("focus");
});
});
</script>
</head>
<body>
<p>Click the button to see the event that will be triggered </p>
<br> <br>
Name:<input type="text" name="fullname">
<button id="btn1"> click to trigger </button>
</body>
</html>Output:
After clicking on the button, the output will be-
In the above example, we can see; first, we have made the document ready for including elements to display on the page using the ready() method, and then we write a function for performing some logical function, and here we are using a focus() method which is applied for “input” tag and then we include click function for “button” element. In this example, we have created a button with its id as “btn1” and its name as “click to trigger”, and for this button element, we are applying the click() function where the click even occurs by clicking the button and this button is connected to trigger() method as in the main ready() function we have included trigger() method where the event which is specified within this method is “focus”. Therefore, whenever the button has clicked, the trigger() method triggers the event focus by which the “input” tag is focused. The output is as shown in the above screenshots.
Example #2
In this, we will see where we can use two parameters for this trigger() function, which works similar to the above example.
Code:
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of jQuery trigger() function </title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#p1 {
border: 3px solid black;
width: 80px;
text-align: center;
}
</style>
<script>
$(document).ready(function(){
$("#p1").click(function () {
$("#p1").bind("custom", function(event, id, name, itname){
alert("Course ID = " + id + "\nCourseName = " + name + "\nIstitutionName = " + itname);
});
$("#p1").trigger("custom", ["P289", "Python", "EDUCBA"]);
});
});
</script>
</head>
<body>
<p> Click the following text to see the trigger() function effect which will also display the data too. </p>
<p id = "p1"> Click me ! </p>
</body>
</html>Output:
After clicking on the button, the output will be-
In the above example, we can see which is similar to the previous example. In this above code, we have used the document to make it ready using the ready() function than in this code, we are not using the button element but instead creating paragraph element and which we have the id “p1”, and we are creating the box for this paragraph text with properties for creating it as a box by which when clicking the trigger() function is applied to this paragraph it triggers an event called custom which binds the function which holds the event along with few data such as in this code we have given “course id, Course Name, and Institution name”. Therefore when the text “click me !”
is clicked, then we get a dialogue box that displays all the data, which is passed as a second parameter to the trigger() function. The output of the above can be seen in the first screenshot, where we can see one box with a black border with text as “click me !”. Then in the second screenshot, we can see the dialogue box, which displays all the data.
Conclusion
In this article, we can conclude that in jQuery, we have an in-built function known as trigger() function, which is used to trigger an event specified for a particular matched or selected element. In jQuery, there is another built-in function known as triggerhandler(), which is similar to the trigger() function, but this function will not trigger the default event as done in the trigger() function.
Recommended Articles
This is a guide to a jQuery trigger event. Here we discuss How to trigger() method works to handle events in jQuery along with the examples and outputs. You may also have a look at the following articles to learn more –
