It's quite often the case that you'll need to chain together some events arbitrarily to produce an action/reaction effect. The dojo. connect function provides a seamless interface for arbitrarily connecting events and JavaScript Objects. For example, you already know that you could hook up a handler when a user mouses over a specific node by using dojo.query and assigning a function via dojo.NodeList's onmouseover method like so:

dojo.query("#foo") //find the node with id=foo .onmouseover(function(evt) ( /* ... */ I);
An alternative implementation via dojo. connect is the following statement, which assembles the connection and returns a handle that can be disconnected later manually if the situation calls for the relationship to be torn down. For example, it's generally a good idea to tear down
the handle explicitly before destroying nodes that are involved in the connection:
va! h = dojo.connect(dojo.byld("foo"), "onmouseover", function (evt) I
/' Later */
dojo.disconnect(h); //tidy up things ...
Although the net effect is the same for the two implementations presented, dojo. connect seamlessly allows you to provide Objects as the context. For example,

Name: Event chaining in JavaScript Objects..jpg Views: 379 Size: 17.9 KB

How To Developers I the following variation illustrates how to fire off an event handler whenever a particular function is invoked:
var obj = ( / / a big hash of functions ...
foo function() /' */ I,
bar: function() ( /* ... */ )
/ / set the handler to fire whenever obj. foo () is run dojo.connect(obj, "foo", function()
If you want to use a particular scope with the custom handler, you can wedge it in as a third parameter. The parameters are all normalised internally. Here's how it would work:
var obj 1 = ( / / a big hash of functions .. foo function () /* * / I,
bar: function() { /* ... */ I
var obj2 = ( / / a big hash of functions. baz : function() { /* ... */ }