Trigger mouseover event using dojo?

Question

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/

score 2 · Answer 1 · answered Apr 19 '12 at 13:23

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>

I'm not looking for a way to add an eventlistener, I want to trigger an event like mouseover in code. Please read the question. — Derek, Apr 19 '12 at 22:03

score 0 · Answer 2 · edited May 23 '17 at 12:06

0

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.

edited May 23 '17 at 12:06

Community

1
1

answered Apr 19 '12 at 09:52

OammieR

2,800
5
30
51

1

thanks, I already found this answer. I'm looking for a way to do this in dojo. – Derek Apr 19 '12 at 12:50

score 0 · Answer 3 · answered Apr 20 '12 at 17:42

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>

Trigger mouseover event using dojo?

3 Answers3