jQuery - Custom Event Creation and Triggering in jQuery

Introduction

Events play an important role in web development. Normally, developers use built-in events such as click, hover, submit, or keypress. However, sometimes applications need their own special events to handle specific situations.

jQuery allows developers to create and trigger custom events. These events help organize code and allow different parts of an application to communicate with each other.

What is a Custom Event

A custom event is a user-defined event created by the developer instead of using predefined browser events.

Examples of situations where custom events are useful:

When data loading is completed
When a form validation process finishes
When a shopping cart updates
When a user completes a specific workflow

Custom events improve modular programming because actions can be separated from event logic.

Creating a Custom Event

Custom events are created using the .on() method.

Syntax:

$(selector).on("eventName", function(){
    // event code
});

Example:

$("#box").on("dataLoaded", function(){
    console.log("Custom event executed");
});

Here, dataLoaded is a custom event name.

Triggering a Custom Event

After creating the event, it must be triggered manually using .trigger().

Example:

$("#box").trigger("dataLoaded");

When this line executes, the function attached to the custom event runs.

Complete Example

$("#btn").on("showMessage", function(){
    alert("Custom Event Triggered");
});

$("#btn").click(function(){
    $("#btn").trigger("showMessage");
});

Explanation:

A custom event named showMessage is created.
When the button is clicked, the custom event is triggered.
The event function executes automatically.

Passing Data to Custom Events

Custom events can also receive additional information.

Example:

$("#box").on("userLogin", function(event, username){
    console.log("Welcome " + username);
});

$("#box").trigger("userLogin", ["Rahul"]);

Output:

Welcome Rahul

This allows events to carry dynamic data.

Using triggerHandler()

jQuery also provides another method:

.triggerHandler()

Difference between trigger() and triggerHandler():

trigger() executes all handlers and performs default browser behavior.
triggerHandler() executes only the event handler and does not bubble up the DOM.

Example:

$("#box").triggerHandler("userLogin");

Advantages of Custom Events

Improves code organization.
Enables communication between independent components.
Reduces repeated code.
Helps build large scalable applications.
Makes programs easier to maintain.

Practical Use Case

In a web application:

Data loads from the server.
A custom event called dataReady is triggered.
Multiple sections of the page update automatically.

Each component listens to the same event instead of directly calling functions.

Conclusion

Custom event creation and triggering in jQuery allow developers to design flexible and modular applications. By defining their own events, programmers can control application behavior more effectively and maintain clean separation between different parts of the code.