Different behavior when events are instantiated through AS3 instead of MXML

[firdosh]

In example 1 the events rollOver and rollOut are initialized using MXML.
When you run the example you can see when you rollOver the Canvas the backgroundColor changes and the rollOver event is fired and when you rollOut the backgroundColor changes again. Thats the way it should work. GOOD :).


<!-- ********* EXAMPLE 1 ****************-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" themeColor="#0EFF02" xmlns:ns1="item.*" >

<mx:Script>
<![CDATA[
private function onOver(evt:Event):void{
trace("onOver : " +evt.currentTarget );
test.setStyle("backgroundColor",0xff00ff);
}

private function onOut(evt:Event):void{
trace("onOut : " +evt.currentTarget );
test.setStyle("backgroundColor",0xffff00);
}
]]>
</mx:Script>
<mx:Canvas id="test" x="118" y="136" width="443" height="133" themeColor="#099FFF" backgroundColor="#D70000" rollOver="onOver(event);" rollOut="onOut(event);">

<mx:Button x="39" y="35" label="Button"/>
</mx:Canvas>
</mx:Application>




Now in example 2 the events rollOver and rollOut are initialized using AS3 code. Now when you rollOver the Canvas
the backgroundColor changes and the rollOver event is fired. Good...but now when you rollOver the Button the rollOut event is fired and then the rollOver event is fired again.( You can see the flicker ).


<!-- ********* EXAMPLE 2****************-->
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" themeColor="#0EFF02" xmlns:ns1="item.*" >

<mx:Script>
<![CDATA[
private function init(evt:Event):void{
test.addEventListener(MouseEvent.MOUSE_OVER, onOver);
test.addEventListener(MouseEvent.MOUSE_OUT, onOut);
}

private function onOver(evt:Event):void{
trace("onOver : " +evt.currentTarget );
test.setStyle("backgroundColor",0xff00ff);
}

private function onOut(evt:Event):void{
trace("onOut : " +evt.currentTarget );
test.setStyle("backgroundColor",0xffff00);
}
]]>
</mx:Script>
<mx:Canvas id="test" x="118" y="136" width="443" height="133" themeColor="#099FFF" backgroundColor="#D70000"
creationComplete="init(event);">

<mx:Button x="39" y="35" label="Button"/>
</mx:Canvas>
</mx:Application>






Why are the child components taking focus away from the parent when events are initialized using AS3 ?

Thanks
Cheers
Firdosh

[drkstr]

You will notice it doesn't do this if you use MouseEvent.ROLL_OVER and MouseEvent.ROLL_OUT in your actionscript. Conversely, You will notice it does if you use mouseOver and mouseOut in your mxml.

Best Regards,
~Aaron