Flex入门(七) --------- 事件

本文深入探讨Flex中的事件处理机制,包括事件源、事件名、响应处理及事件流传播。详细阐述了如何使用MXML标签注册事件监听器和ActionScript代码进行事件处理。介绍了基本交互事件,如鼠标事件和键盘事件,以及如何获取鼠标位置、检测相关按键和处理鼠标滚轮事件。此外,文章还讲解了如何创建自定义事件,包括使用dispatchEvent()方法和继承Event类两种方式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Flex事件:
    
    Flex中的事件是指可以被组件识别的操作,如单击“确定”按钮、选择某个单选按钮或复选框等。

        事件可以由外设触发,如键盘、鼠标,也可能是外部输入,如Web Service的返回。事件还能在组件的外观和生命周期发生变化时触发,
        例如,组件的创建或者改变大小,所有用户与应用交互都会产生事件。用户没有直接与应用交互也可能产生事件,如数据装载完毕。

    事件处理有以下几个基本要素。
     事件源。事件源是指触发这个事件的对象。
     事件名。事件名用于标志某一个特定的事件。
     响应。当事件发生时,可以对事件的发生作出响应。

    在前端逻辑中,事件就是控制整体业务流程的关键,所以事件在前台逻辑中充斥着非常重要的地位。


    1.使用MXML标签注册事件监听器
        在MXML中可以指定组件的事件属性注册事件监听器,当事件发生时会执行指定的响应。
        例如,以下代码定义了一个Button组件,使用其click事件属性指定响应函数myClick,当用户单击Button组件时就会调用该函数。

        <?xml version="1.0" encoding="utf-8"?>
        <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx">
            <s:Button id="myBtn" label="按钮" click="myClick(event)" />
                
                <fx:Script>
                    <![CDATA[   
                        import flash.events.*;    
                        import mx.controls.Alert;
                        public function myClick(event:MouseEvent):void
                        {
                            Alert.show("hello");
                        }
                    ]]>
                </fx:Script>
        </s:Application>
    

    2.使用ActionScript注册事件监听器
        使用ActionScript代码进行事件处理的基本结构如下所示:
        function 响应函数名(Event对象:事件类型):void
        {
            //响应操作
        }
        事件源.addEventListener("事件名", 响应函数名)
        
    Event对象是Event类的实例,Event类是所有其他事件相关类(如KeyboardEvent、MouseEvent)的基类。
    Flex中所有事件相关类都保存在flash.events包中。Event类用于描述Flash Player中发生的事件,一旦事件发生,便会生成Event对象。
    当发生事件时,Event对象将作为参数传递给事件监听器。

        可以使用Event类的构造函数Event()手动创建Event对象,语法格式如下:
        var 对象名:Event=new Event(type, bubbles, cancelable);
        
        其中,type参数可以指定事件的类型,使用事件字符串或常量表示,可以作为Event对象的type属性访问。
        bubbles和cancelable参数为Boolean类型的可选参数,默认值都为false,可以作为Event对象的bubbles和cancelable属性访问。
        
        例如:
        var evt:Event=new Event("click");

    Event类定义了很多可以触发的事件,这些事件对象的type属性值都可以使用Event类的常量表示:详情查看API


    事件流概述
    在处理人机交互的事件时,事件关联可能会很复杂。例如,单击一个Panel容器中的按钮,产生单击事件。
    鼠标实际点在按钮中含有按钮名字的动态文本上,实质上是动态文本接收到了鼠标单击。
    但因为动态文本是按钮的一部分,所以按钮也接收到了鼠标单击。再上一层,由于按钮是Panel容器的子对象,所以容器也接收到了单击。
    

    Flex事件流传播主要分为三个阶段,依次为捕获阶段、目标阶段和冒泡阶段。
        1.捕获阶段
        在捕获阶段,Flex在显示列表中检查每个节点是否注册了事件监听器。从
        根节点开始顺序而下(大多数情况中,根节点是Application对象)。同时,Flex 将事件对象的currentTarget属性值改为当前正在检测的对象。
        
        2.目标阶段
        在目标阶段,Flex找到事件最底层的节点,即目标对象。例如,单击按钮的事件中,按钮上的动态文本即为目标对象。
        
        3.冒泡阶段
        经过目标阶段之后就开始冒泡阶段。冒泡阶段是捕获阶段的逆过程,它从目标对象的父节点沿着原来的路径回到根节点,检测是否有节点注册事件监听器。




    基本交互事件
        InteractiveObject类是用户可以使用鼠标和键盘与之交互的所有显示对象的抽象基类,这意味着所有显示对象都可以使用它定义事件。    


        所谓鼠标事件就是与鼠标交互所发出的事件,如鼠标单击事件click,鼠标双击事件doubleClick等。

        这些事件中除了ROLL_OVER和ROLL_OUT以外,其余都是可以冒泡的。在程序中可以对应上面的公共变量使用相应的鼠标事件。
        
        例如,可以在页面加载函数中注册一个鼠标单击按钮的事件,如下所示:
            internal function init():void
            {
                btn.addEventListener(MouseEvent.CLICK,click);
            }
            定义click函数如下所示:
            internal function click(event:MouseEvent):void
            {
                Alert.show(event.currentTarget.id);
            }



    获取鼠标位置:
        使用MouseEvent类的几个属性可以获得指针的相关位置信息。

        (1)localX和localY:这两个属性保存鼠标事件发生时,鼠标指针相对于父容器的水平坐标和垂直坐标。

        (2)stageX和stageY:这两个属性保存鼠标事件发生时鼠标指针在全局窗口中的水平坐标和垂直坐标。

        2.检测相关按键
        MouseEvent类还可以检测与鼠标事件相关的按键是否按下,例如,实现在单击按钮同时按下不同的按键。
        
        3.鼠标滚轮
        MouseEvent类的delta属性指示用户将鼠标滚轮每滚动一个单位时应滚动多少行。正delta值指示向上滚动;负delta值指示向下滚动。

    
    与键盘交互的事件对象属于flash.events.KeyboardEvent类,可以响应的键盘事件有两种,使用KeyboardEvent类的常量表示,
    分别为KEY_DOWN(按键按下)和KEY_UP(按键弹起)。

    KeyboardEvent类另外还有一些常用属性,如altKey、ctrlKey和shiftKey属性用于指示辅助键【Alt】、【Ctrl】和【Shift】是否被按下。
    keyLocation属性用于区别当前的按键在键盘上的位置。

    按键区域分为四大块,使用4个静态常量定义。KeyLocation.LEFT表示键盘左部,KeyLocation.RIGHT表示键盘右部,KeyLocation.STANDARD表示键盘标准区域,
    KeyLocation.NUM_PAD表示小键盘区域。

    


  创建自定义事件
    1.使用dispatchEvent()方法
    
        Flex中可以通过dispatchEvent()方法手工派发事件,所有的可视化组件都可以调用此方法,
    
        语法格式如下:
        对象.dispatchEvent(Event对象);
        
        该方法的返回值总是true。可以使用此方法派发任意事件,
        
        例如,派发单击按钮的click事件,使用如下语句:
        btn.dispatchEvent(new Event("click"));
    
    2.继承Event类
    
        通过定义一个自定义事件类,继承于Event类,即可以创建一个自定义事件。在自定义类中,
        可以扩展Event类的属性,然后传递出去,从而可以进行相应的扩展。
    
        例如,在包“com.flex.demo”中创建一个自定义事件类MyEvent。

    在一个新建的mxml文件中添加一个按钮组件id为btn,并在页面加载函数中为其添加click事件监听器,
    
    如下所示:
        internal function init():void
        {
            //注册btn的click事件监听器
            btn.addEventListener(MouseEvent.CLICK,doClick);    
            //自定义myEvent事件
            btn.addEventListener("myEvent",doMyEvent);
        }          
        
        在doClick方法中派发“myEvent”事件,如下所示:
        
        internal function doClick(evt:MouseEvent):void
        {
            //派发myEvent事件
            btn.dispatchEvent(new Event("myEvent"));           
        }

        
        doMyEvent方法输出自定义事件的信息,如下所示:
        internal function doMyEvent(evt:Event):void
        {
            import mx.controls.Alert;
            Alert.show("触发了"+evt.target+"注册的"+evt.type+"类型事件!");       
        }


   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值