CODEWITHSUNDEEP
javascriptdojo
Derek
Derek

Reputation: 12378

Trigger mouseover event using dojo?

in jquery you can trigger the mouseover event using $(element).mouseover().

In dojo after you use the connect function, I'm not really sure how to trigger the event. When I used connect with click, I could use element.click() to trigger the click, but for other events like mouseover, calling element.mouseover() doesn't work. So how do you trigger events like mouseover using Dojo? (I know there are plain js ways of doing this like fireEvent, but it's messy and not cross browser proof)

Here's some code

var myButton = dojo.byId("myButton"),
    myDiv = dojo.byId("myDiv");

dojo.connect(myButton, "mouseover", function(evt){
    dojo.style(myDiv, "backgroundColor", "blue");
});

dojo.connect(myButton, "click", function(evt){
    dojo.style(myDiv, "backgroundColor", "yellow");
});

myButton.click();//works

myButton.mouseover();//doesn't work​

Code on jsFiddle: http://jsfiddle.net/mHKDt/28/

Upvotes: 2

Views: 6112

Answers (3)

Mark
Mark

Reputation: 833

Try publish subscribe.

<script type="text/javascript">
<!--
require(["dojo",
        "dojo/topic",
         "dojo/mouse",
         "dojo/dom",
         "dojo/on",
         "dojo/domReady!"],function(dojo,topic,mouse,dom,on){
        var node = dojo.byId("myImg");
        topic.subscribe("mouseover",function(msg){
            console.info("Called");
            dojo.style("myDiv", "backgroundColor", msg);
        });

        on(node,mouse.enter,function(){
            topic.publish("mouseover","green");
        });

        on(node,mouse.leave,function(){
            topic.publish("mouseover","blue");
        });
        topic.publish("mouseover","black");
});         
//-->
</script>

Upvotes: 0

Mark
Mark

Reputation: 833

This should do it for a dojo 1.7 example. You dont need the style sheet or the claro class on the body tag. They are there as part of my scratch pad template I use the try stuff.

<html>
    <head>
            <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css" media="screen">
            <!-- load dojo and provide config via data attribute -->
            <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"
                    data-dojo-config="async: true"></script>
    </head>
    <script type="text/javascript">
    <!--
    require(["dojo/mouse",
             "dojo/dom",
             "dojo/on",
             "dojo/domReady!"],function(mouse,dom,on){
                    var node = dom.byId("myImg")
                    on(node,mouse.enter,function(){
                        console.info("In " + node.title);
                    });

                    on(node,mouse.leave,function(){
                        console.info("Out " + node.title);
                    });
    });         
    //-->
    </script>

    <body class="claro">
        <img id="myImg" title="yay google" src="http://www.google.com/ig/images/jfk/google_color.png"/>
    </body>
</html>

Upvotes: 2

OammieR
OammieR

Reputation: 2850

If you not to mind to use pure javascript, let's see this post Simulate Mouse Over in Vimperator plugin

I found that's working nicely with dojo.

Here is your jsFiddle that I have uppdated.

Upvotes: 0

Related Questions