Tutorials on Dojo events

Go To StackoverFlow.com

1

I am new to Dojo and trying to understand how to handle events. There seems to be at least 3 or 4 different ways to bind events to elements. To add to the confusion, some methods seem to have been deprecated with the new v1.7, so even limiting my Web search to recent months didn't help.

Just having this example work would be a good start (one thing I haven't yet figured out is which modules should be loaded for what):

http://jsfiddle.net/sVJWY/

But beyond this I am hoping to find a good reference.

2012-04-05 22:12
by Christophe


3

Here's a simplified working example.

// alert url when hover over link
require(["dojo/query", "dojo/on",  "dojo/domReady!"], function(query, on) {
    query("a").on("mouseover", function(evt) {
        alert(evt.target.href);
    });
});

http://jsfiddle.net/RichAyotte/sVJWY/6/

Here's an example with a forEach.

require([
    "dojo/query"
    , "dojo/on"
    , "dojo/domReady!"], function(query, on) {
    query("a").forEach(function(node) {
        on(node, "mouseover", function(event) {
            alert(node.href);
        });
    });
});

http://jsfiddle.net/RichAyotte/sVJWY/7/

Note the onmouseover -> mouseover in the code or you could use the mouse extension.

require(["dojo/on", "dojo/mouse"], function(on, mouse){
  on(node, mouse.enter, hoverHandler);
});

http://livedocs.dojotoolkit.org/dojo/on

2012-04-05 22:55
by Richard Ayotte
Thanks! Any idea how to make my example work? I need forEach because in practice I have more than one action for each node - Christophe 2012-04-05 23:04
I'm already lost with your last example... what is the difference between require and define - Christophe 2012-04-06 16:22
The difference between define and require is that define is expected to return a value. The last example was just a bonus to point out the mouse extension. It was copied from the docs and it looks wrong because it isn't returning anything so I'll change it to a require. Here's more info on the loader. http://livedocs.dojotoolkit.org/loader/am - Richard Ayotte 2012-04-06 18:16


2

For your example this is the correct javascript on dojo style

require(["dojo/dom", "dojo/parser", "dojo/domReady!","dojo/on","dojo/query"],
    function(dom,parser,domReady,on,query){
        dojo.ready(function(){
            query("a").forEach(function(node){
                on(node,"mouseover", function(event){alert(node.href);});
            });
        });            
    });​

you were laking the dojo query module, and the dojo style for the new AMD system

2012-04-06 01:52
by Ricardo Garza V.
Good point. I've cleaned up my answer to be pure AMD. Your answer suffers from the same problem. dojo.ready for instance is not AMD and isn't needed in this case because you've included the domReady! module - Richard Ayotte 2012-04-06 03:29
Thanks for the example - Christophe 2012-04-06 19:32
Ads