zoukankan      html  css  js  c++  java

  • 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  

     
  • 相关阅读:
    js基础
    装饰模式，代理模式，继承
    Retrofit源码解析
    Android Studio自定义Plugin
    EMV笔记：持卡人认证（CVM）
    阿里代码规范笔记
    文章博客网址收集
    MultiDex解析
    EMV随记（1）
    RSA笔记
  • 原文地址：https://www.cnblogs.com/keng333/p/2439285.html
Copyright © 2011-2022 走看看