AS3：辨析ROLL_OVER与MOUSE_OVER，ROLL_OUT与MOUSE_OUT

ROLL_OVER与MOUSE_OVER的调度的区别

• 可视组件在鼠标进入该组件时会调度MOUSE_OVER事件，即使是从其子组件移到该组件依然会触发该事件。
• 可视组件在鼠标从不是其子组件的其余组件中进入该组件时会调度ROLL_OVER事件，直观来看，就是鼠标从外部移入该组件才调用。

ROLL_OUT与MOUSE_OUT的调度的区别

• 可视组件在鼠标移出该组件时会调度MOUSE_OUT事件，即使是移到该组件的子组件依然会触发该事件。
• 可视组件在鼠标移到不是其子组件的其余组件中会调度ROLL_OUT事件，直观来看，就是鼠标移到该组件外部才调用。

在含有子组件的可视组件上监听四个事件

• 鼠标由外部进入母组件时能监听到由母组件调度的ROLL_OVER与MOUSE_OVER事件；
• 鼠标由母组件进入子组件时能监听到由子组件调度的MOUSE_OVER事件和母组件调度的MOUSE_OUT事件；
  • 此时子组件还调度了ROLL_OVER事件，但是由于ROLL_OVER没有冒泡阶段（详见AS3：事件流机制），因此其母组件不能监听到该事件；
• 鼠标由子组件移到母组件时能监听到由子组件调度的MOUSE_OUT事件和母组件调度的MOUSE_OVER事件；
  • 同样的，此时子组件还调度了ROLL_OUT事件，但是母组件同样监听不到；
• 鼠标由母组件移到外部时能监听到由母组件调度的ROLL_OUT与MOUSE_OUT事件；

总结

MOUSE事件与ROLL事件的区别在于如下两点：

1. 鼠标在母组件与子组件上移入移出时是否调度的区别。
2. MOUSE事件具有冒泡阶段而ROLL事件没有，决定了在子组件调度事件时母组件是否能监听到的区别。

总之，ROLL事件将整个母组件包括其子组件看成一个组件，移入移出整个组件的边界时母组件才调度事件并能监听该事件。

FLASH示例

在母容器设置监听这四个事件，显示内容前一个为调度事件来源，后一个为调度的事件名称。

 

package

{

import flash.display.MovieClip;

import flash.display.Sprite;

import flash.events.MouseEvent;


public class MouseEvents extends Sprite

{

public function MouseEvents()

{

init();

}


private function init():void

{

var sp:Sprite=new MovieClip();

addChild(sp);

sp.graphics.beginFill(0xff0000);

sp.graphics.drawCircle(0,0,50);

sp.graphics .endFill();

sp.x=stage.stageWidth/2;

sp.y=stage.stageHeight/2;


var sp1:Sprite=new Sprite();

sp.addChild(sp1);

sp1.graphics.beginFill(0xff7700);

sp1.graphics.drawCircle(0,0,25);

sp1.graphics .endFill();


sp.addEventListener(MouseEvent.MOUSE_OVER,onMRO);

sp.addEventListener(MouseEvent.MOUSE_OUT,onMRO);

sp.addEventListener(MouseEvent.ROLL_OVER,onMRO);

sp.addEventListener(MouseEvent.ROLL_OUT,onMRO);

sp.addEventListener(MouseEvent.MOUSE_WHEEL,onMRO);


sp1.addEventListener(MouseEvent.MOUSE_OVER,onMRO);

sp1.addEventListener(MouseEvent.MOUSE_OUT,onMRO);

sp1.addEventListener(MouseEvent.ROLL_OVER,onMRO);

sp1.addEventListener(MouseEvent.ROLL_OUT,onMRO);

sp1.addEventListener(MouseEvent.MOUSE_WHEEL,onMRO);

}


public function onMRO(e:MouseEvent):void

{

trace("目标对象："+e.target+" 当前对象："+e.currentTarget+" 事件类型："+e.type+" 事件阶段："+e.eventPhase);

}

}

}

 

鼠标光标移动过程：从舞台空白地方移入sp，再移入sp1，然后再逆向移动。结果如下：

 

目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：rollOver 事件阶段：2

目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOver 事件阶段：2

目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOut 事件阶段：2

目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：rollOver 事件阶段：2

目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：mouseOver 事件阶段：2

目标对象：[object Sprite] 当前对象：[object MovieClip] 事件类型：mouseOver 事件阶段：3

目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：mouseWheel 事件阶段：2

目标对象：[object Sprite] 当前对象：[object MovieClip] 事件类型：mouseWheel 事件阶段：3

目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：mouseOut 事件阶段：2

目标对象：[object Sprite] 当前对象：[object MovieClip] 事件类型：mouseOut 事件阶段：3

目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：rollOut 事件阶段：2

目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOver 事件阶段：2

目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOut 事件阶段：2

目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：rollOut 事件阶段：2

 

 

评论

1 楼 NewTamato 2011-10-25  

我也曾经遇到过这样的问题，查看了API才知道

Mouseout          用户将指针设备从 InteractiveObject 实例上移开时调度。 事件目标是指先前在指针设备下的对象。 relatedObject 是将指针设备向其移动的对象

RollOut
rollOut 事件的目的是简化带有子级的显示对象容器的移开行为的编码。 当鼠标离开显示对象区域或任何其子级区域并转到除其子级以外的对象时，显示对象调度 rollOut 事件。 这是与 mouseOut 事件行为不同的行为，因为该事件是在每次鼠标离开显示对象容器的任何子对象区域时才会被调度，即使鼠标仍保留在显示对象容器的另一个子对象上也是如此。

所以当我们监听元件RollOut的时候，我就认为元件是一个整体。
这是两者最大的区别的了。

如今在看你的总结，真是加深了印象。