Login Register

dojo.connect

Submitted by criecke on Sat, 04/07/2007 - 18:29.

Events in JavaScript or Dojo based applications are essential to making applications work. Connecting an event handler (function) to an element or an object is one of the most common things you will do when developing applications using Dojo. Dojo provides a simple API for connecting events via the dojo.connect() function. One important thing to note here is that events can be mapped to any property or object or element. Using this API you can wire your user interfaces together or allow for your objects to communicate. The dojo.connnect() API does not require that the objects be Dojo based. In other words, you can use this API with your existing code and interfaces.

Below is the code in the tutorial handling events. Here we connected the event handler, helloPressed, to the onclick property of the hello button element. When the button is clicked the funtion helloPressed will be called.

function helloPressed(){
   alert('You pressed the button');
}
function init(){
   button = dojo.byId('helloButton');
    dojo.connect(button, 'onclick', 'helloPressed');
}

It is also possible to use the Dojo event model to connect simple objects. To demonstrate, lets define a simple object with a couple of methods:

var exampleObj = {
    counter: 0,
    foo: function(){
        alert("foo");
        this.counter++;
    },
    bar: function(){
        alert("bar");
        this.counter++;
    }
};

So lets say that I want exampleObj.bar() to get called whenever exampleObj.foo() is called. We can set this up the same way that we do with DOM events:

dojo.connect(exampleObj, "foo", exampleObj, "bar");

Now calling foo() will also call bar(), thereby incrementing the counter twice and alerting "foo" and then "bar". Any caller that was counting on getting the return value from foo() won't be disappointed. The source method should behave just as it always has. On the other hand, since there's no explicit caller for bar(), it's return value will be lost since there's no obvious place to put it.

In either case, each time dojo.connect is called with the same arguments it will result in multiple connections. Later we will discuss strategies on how to guard against this.

Notice that dojo.connect takes a different number of arguments in the examples above. dojo.connect determines the types of positional arguments based on usage.

The Dojo event system allows you to connect to DOM elements or nodes or plain JavaScript objects. The API is sophisticated enough that it allows you to connect multiple listeners to a single object so you can have multiple actions as a result of a single event such as a mouse click. Of course there is an API to disconnect the listeners too. The Events section describes the Dojo Event system in more detail.

‹ dojo.addOnLoadupdojo.forEach ›

Interesting naming confusion

Submitted by cain_templar on Fri, 05/02/2008 - 06:38.

When I was going through the example above, I found an interesting naming confusion here.

dojo.connect(button, 'onclick', 'helloPressed');
The event name must be 'onclick' instead of 'onClick'.

While in an embedded script event method:
<button dojotype="dijit.form.Button" id="myBtn">
Click me
<script type="dojo/method" event="onClick">
alert("Yes, sire!");
</script>
</button>
The event type must be 'onClick' instead of 'onclick'.

So when should I use the lower cased event names and the other one?

onclick in lower case is event

Submitted by Maine on Thu, 01/01/2009 - 22:11.

onclick in lower case is an event. onClick in camel case is a dijit.form.Button specific function, an "extension point" onClick - callback for when button is clicked; user can override this function

Bad reference

Submitted by GaryFx on Thu, 07/17/2008 - 13:22.

The sentence "Below is the code in the tutorial handling events" seems to refer to a tutorial called "handling events", but no such tutorial exists in the tutorial listing at http://dojotoolkit.org/key-links, nor does there seem to be a tutorial in "The Event System" chapter of this part of the book. The code itself is similar, but not identical to the example for simple connections in that chapter.

I suggest deleting the sentence altogether. The reference at the very end of the page is more than adequate.

Can dojo.connect be used in

Submitted by georges on Tue, 07/29/2008 - 20:47.

Can dojo.connect be used in fetched content from an ajax call?

http://gosydtech.com

will it work with object defined as functions?

Submitted by Evgeny Fadeev on Sun, 11/16/2008 - 07:10.

the following doesn't seem to work - does it mean that objects have to be defined like associative arrays? Thanks!

function obj(){
this.foo = function(){alert('foo');}
}

var theObj = new obj();

dojo.connect('smth','onlick','theObj.foo');