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示例

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

Java代码  收藏代码
  1. package  
  2.   
  3. {  
  4.   
  5. import flash.display.MovieClip;  
  6.   
  7. import flash.display.Sprite;  
  8.   
  9. import flash.events.MouseEvent;  
  10.   
  11.   
  12. public class MouseEvents extends Sprite  
  13.   
  14. {  
  15.   
  16. public function MouseEvents()  
  17.   
  18. {  
  19.   
  20. init();  
  21.   
  22. }  
  23.   
  24.   
  25. private function init():void  
  26.   
  27. {  
  28.   
  29. var sp:Sprite=new MovieClip();  
  30.   
  31. addChild(sp);  
  32.   
  33. sp.graphics.beginFill(0xff0000);  
  34.   
  35. sp.graphics.drawCircle(0,0,50);  
  36.   
  37. sp.graphics .endFill();  
  38.   
  39. sp.x=stage.stageWidth/2;  
  40.   
  41. sp.y=stage.stageHeight/2;  
  42.   
  43.   
  44. var sp1:Sprite=new Sprite();  
  45.   
  46. sp.addChild(sp1);  
  47.   
  48. sp1.graphics.beginFill(0xff7700);  
  49.   
  50. sp1.graphics.drawCircle(0,0,25);  
  51.   
  52. sp1.graphics .endFill();  
  53.   
  54.   
  55. sp.addEventListener(MouseEvent.MOUSE_OVER,onMRO);  
  56.   
  57. sp.addEventListener(MouseEvent.MOUSE_OUT,onMRO);  
  58.   
  59. sp.addEventListener(MouseEvent.ROLL_OVER,onMRO);  
  60.   
  61. sp.addEventListener(MouseEvent.ROLL_OUT,onMRO);  
  62.   
  63. sp.addEventListener(MouseEvent.MOUSE_WHEEL,onMRO);  
  64.   
  65.   
  66. sp1.addEventListener(MouseEvent.MOUSE_OVER,onMRO);  
  67.   
  68. sp1.addEventListener(MouseEvent.MOUSE_OUT,onMRO);  
  69.   
  70. sp1.addEventListener(MouseEvent.ROLL_OVER,onMRO);  
  71.   
  72. sp1.addEventListener(MouseEvent.ROLL_OUT,onMRO);  
  73.   
  74. sp1.addEventListener(MouseEvent.MOUSE_WHEEL,onMRO);  
  75.   
  76. }  
  77.   
  78.   
  79. public function onMRO(e:MouseEvent):void  
  80.   
  81. {  
  82.   
  83. trace("目标对象："+e.target+" 当前对象："+e.currentTarget+" 事件类型："+e.type+" 事件阶段："+e.eventPhase);  
  84.   
  85. }  
  86.   
  87. }  
  88.   
  89. }  
  90.   
  91.    
  92.   
  93. 鼠标光标移动过程：从舞台空白地方移入sp，再移入sp1，然后再逆向移动。结果如下：  
  94.   
  95.    
  96.   
  97. 目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：rollOver 事件阶段：2  
  98.   
  99. 目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOver 事件阶段：2  
  100.   
  101. 目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOut 事件阶段：2  
  102.   
  103. 目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：rollOver 事件阶段：2  
  104.   
  105. 目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：mouseOver 事件阶段：2  
  106.   
  107. 目标对象：[object Sprite] 当前对象：[object MovieClip] 事件类型：mouseOver 事件阶段：3  
  108.   
  109. 目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：mouseWheel 事件阶段：2  
  110.   
  111. 目标对象：[object Sprite] 当前对象：[object MovieClip] 事件类型：mouseWheel 事件阶段：3  
  112.   
  113. 目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：mouseOut 事件阶段：2  
  114.   
  115. 目标对象：[object Sprite] 当前对象：[object MovieClip] 事件类型：mouseOut 事件阶段：3  
  116.   
  117. 目标对象：[object Sprite] 当前对象：[object Sprite] 事件类型：rollOut 事件阶段：2  
  118.   
  119. 目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOver 事件阶段：2  
  120.   
  121. 目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：mouseOut 事件阶段：2  
  122.   
  123. 目标对象：[object MovieClip] 当前对象：[object MovieClip] 事件类型：rollOut 事件阶段：2  

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/keng333/p/2439285.html