JavaScript recognizes many DOM events. There are many standard JavaScript events that are supported in popular libraries like jQuery. By standard events, we mean the browser events, DOM events and page load events. The most common examples of such events are click and mouseover events.
Events are used to trigger certain actions. Very often you need to define some action on click of a button or on hover of a navigation link. An action can be a change of background color on the hover of a menu link. The standard events are captured as they occur. For every standard event, any defined handler gets fired. As another simple example, a click event may fire an action like an alert message.
$('#button').on("click", function() {
alert("Button clicked");
});In addition to the standard events, jQuery allows you to define custom events. Custom events are similar to the ordinary events but, a custom event is declared and called programmatically.
A custom event requires the handler definition and then, it can be triggered as per requirement. An example of custom event handler definition is:
$('#button').on("customEvent", function() {
alert("I am triggered by custom Event!!!");
});Let’s say, the click of button is already bound with the buttonClicked function. Now, you want to add an additional custom event with the click of that button. The .trigger() and .triggerHandler() functions can be used to trigger the custom event.
function buttonClicked() {
// Other action
$('#button').triggerHandler({type:userButton.clicked});
}The custom event handler can be defined as
$(function() {
$('#button').on("userButton.clicked", function() {
alert("You performed the userButton click action!!!");
});
});You can trigger any custom events on any DOM element. You just have to define the event handler and the trigger the event. You can use a combination of .bind() and .trigger() or .on() and .trigger(). In jQuery 1.7, the use of one uniform standard function, .on(), is recommended.
Passing Parameters to Custom Events
You might want to pass certain parameters to the event handler. Your custom handler can make an AJAX call, so you will require certain parameters to be sent for AJAX request. Let’s see how parameters can be passed to custom event handler.
function buttonClicked() {
// Other action
$('#button').triggerHandler({type:userButton.clicked, parameter1: 'Parameter 1', parameter2: 'Parameter 2' });
}Now, the event handler can access these parameters by referring the object.
$(function() {
$('#button').on("userButton.clicked", function(obj) {
alert(obj.parameter1 + " and " + obj.parameter2 + " were passed to custom event");
});
});Multiple Handlers with Custom Events
The custom events also allow you to trigger multiple handlers for one action.
// define one trigger
$('#button').trigger('multiAction');
// define multiple actions
$('#button').on('multiAction', function() {
// Some calculation done here
});
…
// At some other point in code, some AJAX action for same trigger
$('#button').on('multiAction', function() {
// Some AJAX here
});There are some differences in the way .trigger() and .triggerHandler() functions respond. We will take up those in a separate post.
Follow Us