Dojo.connect() is a very powerful function. It not only allows you to connect to various DOM and user events but it also lets you connect to other JavaScript methods and custom events. You can read about connecting to custom objects and functions in the online help here.

The most common use case for dojo.connect() is probably attaching to things like buttons or DIV clicking but you should consider using the Dojo event system for more than just user interface based events. It’s a good way to create a decoupled event system for disparate components.You can learn about creating such an event system by reading the documentation on dojo.connectPublisher(). It shows how you can publish events on a specific topic.

Many times you don’t even need the dojo.connect() for UI based events because you can do that inline using the regular JavaScript way, like this:

<img
    id="btn_pin"
    style="float: right;cursor: pointer;"
    title="Un-pin Attachment"
    src="icons/pinned-down.png"
    onClick="togglePin();">
</img>

But, let’s say each page has a specific button bar action or menu action like “New”. Each page could connect its own handler to that button based on the context. So you would leave the HTML onClick() attribute blank and use dojo.connect() to handle the click event for that page:

function conectToolbar(){
  dojo.connect(dojo.byId("btn_pin"),"onclick",createNewDocument);
}

The third parameter is simply a JavaScript method in the current context.

Now, how does this stand up to jQuery? Once, again, I think Dojo offers more flexibility in this space because it essentially supports a custom event model where the traditional jQuery approach uses bind.  jquery.bind() or more commonly, $.bind(), let’s you attach to all of the common DOM events for an element. So using the powerful selector API you can attach to any DOM related event (link):

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

This tells jQuery to bind to the element with the id of “foo” and attach to the “click” event.  In the above sample an inline function is used but you could have specified any JavaScript function in the current context. You can learn more about the different events supported in the help. jQuery does in fact support custom event types so you could simply generate your own event names and use the trigger() method to publish the event to any listeners. This basically allows you to achieve a generic pub sub without using additional plugins. This is described really well on another blog, check it out here. From what I can tell however, there is no built in way for jQuery to do this and the referenced article talks about the plugin Peter Higgins wrote for general pub/sub. What I really like about the article is how the author actually performed tests to see how fast the jQuery custom event method performs to the general pub/sub plugin. Check out his results, they clearly show using jQuery DOM events for custom events is way slower than using the pub/sub mechanism.

So what is next? I guess one thing would be to test this same level of performance testing using Dojo pub/sub versus the connect method. I checked the Dojo source and it looks like Dojo.connect does not use the Dojo.publish/subscribe libraries under the covers so it may result in the same poor performance results as jQuery. That might just be another blog post!

Another excellent article to read is the one on DeveloperWorks by Mike Wilcox – Conquer event-driven design using dojo.connect.