---
title: "jQuery custom events"
description:
  "What are jQuery custom events. How to build them. How to use them. This blog
  discusses all that and much more."
canonical_url: "https://www.bigbinary.com/blog/jquery-custom-events"
markdown_url: "https://www.bigbinary.com/blog/jquery-custom-events.md"
---

# jQuery custom events

What are jQuery custom events. How to build them. How to use them. This blog
discusses all that and much more.

- Author: Neeraj Singh
- Published: July 31, 2009
- Categories: jQuery

_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](http://docs.jquery.com/Events/bind#typedatafn) 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.

```javascript
$("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.

```javascript
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.

```javascript
$("#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](http://docs.jquery.com/Events/trigger#eventdata) .

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.

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

## Links

- [Human page](https://www.bigbinary.com/blog/jquery-custom-events)