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:
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.query("#testHeading")
.style("cursor","pointer")
.connect("onclick",function(){
this.innerHTML = "I’ve been clicked";
});
});
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:
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.
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:
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.
Follow Us
Subscribe