Using custom jQuery events will save you a lot of headaches.

If you use JQuery then you have likely already done events like this:

$('button').click(function (e) {

JQuery's event wrapper is very useful and it allows you to easily bind to common DOM events like click, keypress, change, etc. But did you know that you can bind to and trigger your own custom events?

If you look at the code above you can see that our $data element is listening for a custom event called "loadData". You can also see that three seconds after page load we trigger our custom event. We also trigger the same event when our $reload button is clicked.

Why is this useful you ask? Well in this particular example it's not. In our example we could have easily declared a function called "loadData" and called the function rather than triggering the event. There are many instances where events can be useful. One use-case for custom events is custom JQuery plugins. Many plugins expose all sorts of events that you can bind to. When the plugin performs a particular action it will trigger those custom events allowing you to do some work.

It also allows you to define multiple event handlers. This means that you can attach logic all over your application into these handlers and all of them will be invoked when the event is triggered.

You may have noticed that our event handler in the above example accepted an argument 'e'. You may have seen this argument in other events such as the click event. This argument is the event object itself. The event object represents the event that occurred. JQuery's event wrapper adds some nice functionality to events. One example are the helper functions to stop the event from bubbling up the DOM tree. If you call e.stopPropagation() then the event will not bubble up beyond the current event handler.

Being able to trigger custom events is cool and all, but what if you need to pass some additional data to the event handler(s)? Just pass additional arguments into the trigger() function.

$data.on('loadData', function (e, msg) {

var msg = 'Custom argument passed to event handlers!';  
$data.trigger('loadData', msg);

This is extremely useful when you need to pass data around to different components within your application and those components are not directly aware of each other. All your components have to do is listen/trigger custom events and you have effective communication between loosely coupled parts of your app.

A perfect use-case for custom events is when you are building a custom dashboard page with a variety of widgets that perform various functions, but those widgets also need the ability to communicate with one another. Trying to slap together some sort of pipeline that allows all the widgets to have references to other widgets' functions would be a somewhat involved task.

Also, let's say that widget A needs to tell widget B to reload some data and it does so via a direct reference to a function within widget B. What would happen if widget B failed to load or if the user had the ability to disable/hide widget B? You are now stuck having to do all sorts of checking to see if the various widgets and components are available before you try to reference them or else you risk breaking your application.

Custom events are great for "dashboard" scenarios and in an upcoming tutorial I'm going to show you how to build a drag and drop dashboard grid complete with widgets that vary in size.


Read more posts by this author.

comments powered by Disqus