Using custom event on jQuery

julian — Wed, 09 Sep 2009 08:04:33 +0000

When doing Javascript, it is common to handle different DOM event like click, mouseover, keydown… This is cool that with the DOM triggering those events, we can create custom handling / behaviors on it. Say, when user click on the button, a edit panel fade in. But this is not good enough when we have to deal with a complex / feature rich interface. For instance, if a feature require a series of action on different components, how can we do it in a proper way? Here is custom event come into play.

There are different ways of making custom event to works, following will show:
1. Using jQuery.bind and jQuery.trigger
2. Using the jQuery plugin jQuery.mhub

Using jQuery.bind and jQuery.trigger

Have searched for how to have custom event on jQuery, found that yoan’s Introduction to jQuery’s custom event had some good insight. He had achieved it by using the bind and trigger function in jQuery. I have referenced his blog and the API from jQuery and created a rather primitive sample.

var count = 0;
var elLog = document.getElementById("log");

// trigger the ticker event into body element
setInterval(function() {
    $("body").trigger("ticker",{name:"my name is foo",count:count++});
},3000);

$("body").bind("ticker",gFunc);

function gFunc(evt,msg) {
    elLog.innerHTML += "gFunc triggered

";
}

var myApp = {
    name:"app1",

    init:function() {
        var that = this;
        // bind the _handlerTicker function to the ticker event of body element
        $("body").bind("ticker",function() {that._handlerTicker.apply(that,arguments)});
    },

    _handlerTicker:function(evt,msg) {
        elLog.innerHTML += this.name + "
";
        elLog.innerHTML += "event name: " + evt.type + "
";
        elLog.innerHTML += "msg content: name = " + msg.name + ", count = " + msg.count + "

";
    }
}
myApp.init();

The sample in action

My sample code above works but with some draw backs:
1. The custom event need to associated with a dom element which have nothing to do with it, here is the body element.
2. When dealing with a large application / working with different plugin / mashup, we could end up with a name collision on the custom event.

Using the jQuery plugin jQuery.mhub

To tackle the problems listed above, I created a message hub plugin, jQuery.mhub. This jQuery.mhub employ a factory design. It only contains one single method:

var demoHub = jQuery.mhub.create();

Which return a message hub object with the following methods:

demoHub.add(String NAME);
demoHub.remove(String NAME);
demoHub.send(String NAME, Object MESSAGE );
demoHub.listen(String NAME, Function HANDLE_FN, Object SCOPE );

Here is a sample to see how the jQuery.mhub works. By using the jQuery.mhub, the above 2 problems state can be solved.

1. The custom event no longer tide up with a dom element.
2. mhub object are created from jQuery.mhub.create();, you can get your own mhub without sharing it to other component and avoid name collision

A primitive sample of jQuery.mhub.

The source code:

var count = 0;
var elLog = document.getElementById("log");
var demoHub = jQuery.mhub.create();

demoHub.add("ticker");

setInterval(function() {
    demoHub.send("ticker",{name:"my name is foo",count:count++});
},3000);

demoHub.listen("ticker", globalFunc);

function globalFunc(evt,msg) {
    elLog.innerHTML += "globalFunc triggered

";
}

var myApp = {
    name:"app1",

    init:function() {
        demoHub.listen("ticker", this._handlerTicker, this);
    },

    _handlerTicker:function(name,msg) {
        elLog.innerHTML += this.name + "
";
        elLog.innerHTML += "event name: " + name + "
";
        elLog.innerHTML += "msg content: name = " + msg.name + ", count = " + msg.count + "
";
    }
}

myApp.init();

JavaScript Infected » jQuery

Using custom event on jQuery

Using jQuery.bind and jQuery.trigger

Using the jQuery plugin jQuery.mhub