How to handle mouseover event in EaselJS?

Question

I'm using EaselJS and I'd like to change (slightly enlarge) images while mouse is hovering over them. It seems that mouseover and mouseout events would be a good way to do it.

http://www.createjs.com/Docs/EaselJS/classes/Container.html#event_mouseover

However, there are no examples in the docs, or at least I couldn't find any. I tried googling but without luck.

I tried something like this:

stage.enableMouseOver();
var btn  = new createjs.Bitmap("mybtn.png");
btn.mouseover = function() {
    btn.x++;
};

and found out that this works:

btn.onMouseOver = function() {
    btn.x++;
};

but docs say this variant is deprecated and one should use events. What's the proper way?

Answer 1

You should use addEventListener as shown in this example (every time you move your mouse over the circle, the alpha/transparency changes):

http://jsfiddle.net/wiredprairie/U3PYD/

circle.addEventListener("mouseover", function() {
   circle.alpha *= .80;
   stage.update();
});

It assumes that you've called enableMouseOver as documented as well:

stage.enableMouseOver(20);