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,
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() { /* ... */ }