Event Handlers

We previously covered adding event handlers to our pages and will now look at how to trigger an event on specific elements.

In a situation where you have multiple handlers, and find that you want to trigger one or more already setup handlers based a user’s interaction. jQuery API offers an elegant solution. Rather than duplicating the code, we simply trigger those event.
jQuery has a .trigger(…) event that allows us to do that. We simply trigger the event as as if the user did it through the user interface.

In jQuery, you can easily and quickly add event handlers to add behaviour to your code:

$("#element").on("click", doSomething);
$( "p" ).on( "click.doBetter", doBetter);

Let say you wanted to trigger the click event:

$("#element").trigger("click");

jQuery reference: Execute handler and behavior attached to an event

You will find this function very useful when you come across situations where you want to trigger a change in another dropdown or click on a link.
The .trigger(…) function cannot be used to mimic native browser events, such as clicking on a file input box or an anchor tag. This is because, there is no event handler attached using jQuery’s event system that corresponds to these events. It is a browser restriction and mainly for security reasons.

jQuery .trigger(…) method allows you to build sophisticated rich applications that can respond to users’ actions in a very fine-tuned manner. It provides a pipeline to programmatically trigger events and serves as a vehilce for creating loosely coupled services and components.

Compress JavasScript files and your jQuery files with this coding web tool.