鼠标事件：MouseOut与RollOut，MouseOver与RollOver

这两类事件看起来是一样的，都是在鼠标经过组件时触发这个事件，但是如果要是真的一样的话，又不可能搞两个这样的，因此它们还是有些区别的，区别的地方就在于如果一个组件包含了另外一个组件，例如一个Canvas中包含一个按钮，那么ROLL_OVER和ROLL_OUT事件只会在移入或移出Canvas时触发，而在Canvas里的Button上时，ROLL_OVER和ROLL_OUT是不会触发的，而是触发MOUSE_OVER和MOUSE_OUT。

下面是测试的代码：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="init()">
<mx:Script>
   <![CDATA[
   
    private function init():void{
     cav.addEventListener(MouseEvent.ROLL_OVER,rollover);
     cav.addEventListener(MouseEvent.ROLL_OUT,rollout);
     cav.addEventListener(MouseEvent.MOUSE_OVER,mouseover);
     cav.addEventListener(MouseEvent.MOUSE_OUT,mouseout);
    }
   
    private function rollover(event:MouseEvent):void{
     trace("roll over");
    }

    private function rollout(event:MouseEvent):void{
     trace("roll out");
    }
    private function mouseover(event:MouseEvent):void{
     trace("mouse over");
    }
    private function mouseout(event:MouseEvent):void{
     trace("mouse out");
    }   
   
   
   ]]>
</mx:Script>

<mx:Canvas id="cav" width="100%" height="100%"
   borderStyle="solid" backgroundColor="0xFFFFFF">
   <mx:Button id="b" label="here" x="64" y="47" width="107" height="54"/>
</mx:Canvas>

</mx:Application>

测试的结果如下：

移入Canvas：roll over
移入Canvas：mouse over
移入Canvas中的按钮：mouse out
移入Canvas中的按钮：mouse over
再次移入Canvas：mouse out
再次移入Canvas：mouse over
移出Canvas：mouse out
移出Canvas：roll out