jQuery custom events

Following code has been tested with jQuery 1.3 .

Javascript is all about interactions. When an event happens then something should happen. For example hover, click, focus, mouseover etc are basic events which are used on a regular basis. jQuery provides a method called bind to bind an action to an event. For example, if we want an alert message when we click on a link then that can be done like this.

$("a").bind("click", function () {
  alert("I have been clicked");
});

jQuery also allows developers to make use of custom events. How it is going to help us, we are going to see it shortly. First let's take a look at a basic calendar application.

This is a simple javascript calendar which primarily does four things: render calendar itself, pull data from API and update calendar with API data, ability to collapse event information and ability to expand event information.

Code looks like this.

function redrawForMonth(d) {
  //business logic to render calendar
  $("#monthly_calendar_umbrella").updateCalendarWithAPIData();
  $("#monthly_calendar_umbrella").ExpandAllEvents();
}

function updateCalendarWithAPIData() {
  //business logic to get the data from API and appending data to appropriate date cell
}

function CollapseAllEvents() {
  //business logic
}

function ExpandAllEvents() {
  //business logic
}

In the above case we have four methods. If all the implementation is filled out and helper methods are added then ,in total, we'll have tons of methods.

And slowly, it'll become difficult to see which methods act on the main element monthly_calendar_umbrella.

Let's look at the same functionality if implemented using jQuery custom events.

$("#monthly_calendar_umbrella")
  .bind("redrawForMonth", function (e, d) {})

  .bind("updateCalendarWithAPIData", function (e, d) {})

  .bind("CollapseAllEvents", function (e) {})

  .bind("ExpandAllEvents", function (e) {});

First difference, you will notice is how nicely all the actions possible on the main element are laid out. In this case just one look at the code tells me that four actions can be performed on the main element. This was not so obvious from the first version of the code.

In this case, I am binding events such as 'redrawFroMonth' to the element. Obviously 'redrawForMonth' is not a native event such as 'click' or 'submit'. This is what I mean by binding 'custom events' to elements. In this case 'redrawForMonth' is a custom event.

The other thing that is not so obvious is the shift in focus. Traditional javascript programming has been too obsessed with the elements that is clicked or submitted that causes an action. The emphasis has been too much on keeping the code around the element that creates an action. In this case the code has been developed around the element that is being acted upon.

Now, the last part of the discussion is how to trigger custom events. Well, jQuery has a method called trigger .

Note that while binding a function is passed. The first parameter of that function is always an event handler. In the below example I am passing only one parameter even though the function takes two parameters: event handler element and the parameter I defined.

$("#monthly_calendar_umbrella").trigger("redrawForMonth", new Date());