Events

By on November 2, 2009 7:58 am

Note: The Dojo Quick Start Guide posts – while still relevant – are a bit dated. Please visit http://dojotoolkit.org/documentation/ for expert tutorials and API documentation to help you get up and running with Dojo.

The next important concept we are going to cover is interacting with our page. We’ve already set the heading to some alternate text, but what if we wanted to do something more interesting? Perhaps change it to something else when the user clicks on it? dojo.connect is the one-stop solution for all your event needs:

dojo.ready(function(){
     var node = dojo.byId("testHeading");
     dojo.connect(node,"onclick",function(){
       node.innerHTML = "I've been clicked";    	
     });	    
});

A convenient way to do the above using dojo.query would be:

dojo.ready(function(){
     dojo.query("#testHeading")
	.style("cursor","pointer")
	.connect("onclick",function(){
	  this.innerHTML = "I've been clicked";    	
	});	    
});
We added another chain .style to our example, to make the cursor a pointer when hovering over the header node. We could have done this with plain CSS, and probably should have, to avoid unnecessary code. This, however, is a convenient way to dynamically alter most any CSS property, and very useful.

This allows us to make an onclick function on more than one node at a time, though our NodeList only has one element above. We could easily find a big group of elements, and affect them all. For instance, to prevent all links on a page from leaving, utilize the normalized event object dojo.connect passes:

var disableLinks = function(){
     dojo.query("a").connect("onclick",function(e){
       e.preventDefault(); // stop the event
       console.log('clicked: ',e.target); // the node we clicked on
     });	
};
dojo.ready(disableLinks);

The code e.preventDefault will prevent the event from “doing what it was going to do”. In the example, we preventDefault on the click event, which would have followed the anchor link we connected to. It is common to see the event object written as e or evt when passed as a parameter.

More about the normalized event object used in Dojo can be found in the Events Quickstart at the Dojo website.

We can also connect to methods of specific objects, and execute them in the same scope. This is useful as you get into declaring classes in Dijit, or animations. Lets create a really simple object with some methods, and watch them interact:

var mineObj = {
     aMethod: function(){ 
	console.log('running A');   
     }, 
     bMethod: function(){ 
        console.log('running B'); 
     }    
}; 
var otherObj = { 
     cMethod: function(){ 
        console.log('running C');            
     } 
}; 
dojo.ready(function(){ 
     // run bMethod() whenever aMethod() gets run 
     dojo.connect(mineObj,"aMethod",mineObj,"bMethod"); 

     // run an entirely different object's method via a separate connection 
     dojo.connect(mineObj,"bMethod",otherObj,"cMethod"); 

     // start chain of events
     mineObj.aMethod(); 
}); 

You should see “running A B C” on separate lines in the console. The full power of dojo.connect can be explored via the dojo.connect API.

Other posts in the series