マウスカーソルがオブジェクト上に重なったとに発生するイベントは、MouseEvent.ROLL_OVER あるいは、MouseEvent.MOUSE_OVER で、オブジェクトから外れたときに発生するイベントは、MouseEvent.ROLL_OUT あるいは、MouseEvent.MOUSE_OUT でキャプチャすることができます。
では、その違いは何でしょう？ リスナーを登録したオブジェクトの入れ子になったインスタンスの取り扱いによって異なるのです。
マウスカーソルがオブジェクト上に重なったとに発生するイベントは、MouseEvent.ROLL_OVER あるいは、MouseEvent.MOUSE_OVER で、オブジェクトから外れたときに発生するイベントは、MouseEvent.ROLL_OUT あるいは、MouseEvent.MOUSE_OUT でキャプチャすることができます。
では、その違いは何でしょう？ リスナーを登録したオブジェクトの入れ子になったインスタンスの取り扱いによって異なるのです。
簡単に言えば、ROLL_OVER 、ROLL_OUT は親にしか適用されないってこと！
Stage にMovieClip クラスのインスタンス mc1 が配置され、その子要素として mc2 が配置された状態があるとします。
親である mc1 にリスナーを登録した場合、MouseEvent.ROLL_OVER と MouseEvent.ROLL_OUT は、 mc1 に対してのみ有効になります。
これに対し、 MouseEvent.MOUSE_OVER と MouseEvent.MOUSE_OUT は、子である mc2 でも有効です。
まず、 mc2 上にマウスが重なったとき mc1 に対して MouseEvent.MOUSE_OUT が発生し、 mc2 に対して MouseEvent.MOUSE_OVER が発生します。
次の例は、入れ子になっているオブジェクトに発生するイベントの追跡をしています。
[sourcecode language=”js”]
mc1.addEventListener (MouseEvent.MOUSE_OVER, eventHandler);
mc1.addEventListener (MouseEvent.MOUSE_OUT, eventHandler);
mc1.addEventListener (MouseEvent.ROLL_OVER, eventHandler);
mc1.addEventListener (MouseEvent.ROLL_OUT, eventHandler);
function eventHandler (event:MouseEvent):void {
trace (event.target.name, event.type);
}
[/sourcecode]
event.target.name は、イベントターゲットのインスタンス名を返します。また、event.type はどのようなイベントが発生したか、そのイベントのタイプを返します。
下の図は、マウスを矢印の方向へ移動させてときに発生する、マウスイベントを表しています。
