`

Flex中的事件机制

阅读更多
一. 事件简介
事件可以由外设触发, 比如:键盘,鼠标, 也可能是外部输入, 比如:web service的返回.
事件还能由组件的外观和生命周期发生变化时触发, 比如:组件的创建或者改变大小.
所有用户与应用交互都会产生事件.用户没有直接与应用交互也可能产生事件, 比如:数据装载完毕.
你可以在程序中使用事件监听器监听这些事件. 事件监听器是函数方法用于响应指定的事件. 有时也称之为事件处理器.
Flex的事件模型基于DOM3事件模型.
组件产生派发事件并消费(监听)其他事件.如果一个对象想要了解其他对象事件的信息, 可以注册一个监听器.
当事件发生时,对象派发此事件到所有注册过的监听器中.
组件有Flex提供的内建事件. 也可以使用派发-监听模型定义自己的事件监听器, 并指定监听器监听何种事件.
二. 事件流简介
当一个事件被派发出来时, 事件对象从根节点开始自上而下开始扫描display list, 一直到目标对象, 检查每个节点是否有相应的监听器.
目标对象指的是display list中产生事件的对象. 比如:
<mx:Panel>
<mx:HBox>
<mx:VBox>
<mx:Button />
</mx:VBox>
</mx:HBox>
</mx:Panel>
如何此时 resize了VBox, 则会从根(Application)开始, 下来检查Panel, HBox, 直到目标对象-产生resize事件的VBox为止.

三. 事件的派发
Flex中可以通过dispatchEvent()方法手工派发事件, 所有UIComponent的子类都可以调用此方法.
语法:
objectInstance.dispatchEvent(new Event("event_type"):Boolean
参数event_type是Event对象的type属性. 函数的返回值总是True.
可以使用此方法派发任意事件, 而不仅仅是用户自定义事件, 比如: 可以派发一个Button的Click事件.
var result:Boolean = buttonInstance.dispatchEvent(new Event(MouseEvent.CLICK));

在Flex应用中不是必须对新派发的事件进行处理, 如果触发了一个事件, 而没有对应的Listener时,Flex忽略此事件.
如果想给Event对象添加新属性, 就必须继承Event类,然后定义新属性

四.事件的传播:
事件触发后, Flex有3个检测事件监听器的阶段, 3个阶段的发生的顺序如下:
1. 捕获
2. 目标
3. 上浮
在任意一个阶段, 节点们都有机会操作事件. 比如: 用户点击了一个在VBox中的Button,
在捕获阶段, Flex检查Application对象(根节点)和VBox是否有监听器处理此事件. Flex然后在目标阶段触发按钮的监听器.
在上浮阶段, VBox和应用以与捕获阶段相反的顺序再次获得机会处理事件.
在Actionscript3.0中,你可以在任意目标节点上注册事件监听器. 但是部分事件会被直接传给目标节点,比如Socket类.
捕获阶段的节点顺序是从父节点到子节点的, 而上浮阶段刚好相反.
捕获事件缺省是关闭的,也就是说如果要捕获事件, 必须显式指定在捕获阶段进行处理.
每一个Event都有target和currentTarget属性, 帮助跟踪事件传播的过程.

捕获阶段:
在捕获阶段,Flex在显示列表中检查事件的祖先是否注册了事件的监听器. Flex从根节点开始顺序而下.
大多数情况中, 根节点是Application对象. 同时, Flex改变事件的currentTarget值.
缺省情况下, 在此阶段,没有容器监听事件. use_capture参数的值是False,在此阶段添加监听的唯一方法是在调用add_listener时,
传入一个为True值的use_capture参数, 比如:
myAccordion.addEventListener(MouseEvent.MOUSE_DOWN, customLogEvent, true);
如果是在Mxml中添加监听, Flex设置此参数为False, 没有办法进行修改.
如果设置了use_capture为True, 那么事件将不会上浮. 如果既想捕获又想上浮就必须调用 addEventListener两次.
一次use_capture参数为true, 一次为false;
捕获很少使用, 上浮的使用更为普遍.

目标阶段:
在目标阶段, Flex激发事件的监听程序, 不检查其他的节点.

上浮阶段:
事件只在bubbles属性为True时才进行上浮. 可以上浮的事件包括: change, click, doubleClick, keyDown, keyUp, mouseDown, mouseUp.
在上浮阶段, Flex改变事件的currentTarget属性, 而target属性是初始派发事件的对象.

查询事件阶段:
使用事件的eventPhase可以获得事件当前的阶段,
1: CAPTURE_PHASE
2: AT_TARGET
3: BUBBLING_PHASE
示例: private function determineState(event:MouseEvent):Void { Debug.trace(event.eventPhase + ":" + event.currentTarget.id); }

停止传播:
使用下面两个函数停止事件的传播:
stopPropagation()
stopImmediatePropagation()

 
件是一个非常有用的功能,通常用于信息传递交互大大提高程序编写的灵活性。在高级语言中都会集成这方面特性;Flex也不例外几乎所有控件中都集成了大量的事件,如果Button的Click事件等。但实际应用中控件自有的事件是不能满真实需要的,特别在自己编写自定义控件时,自定义控件内部信息的改变如何及时通知所在的容器变得很更要;这个时候自定义事件就起到它的作用。

       在Flex中定义事件有两中情况,分别是ActionScript和MXML中定义。

       在ActionScript中定义:



CODE:[Event(name="myEnableEvent", type="flash.events.Event")]

public class MyComponent extends UIComponent

{

           ...

}
在MXML中定义:



CODE:<mx:Metadata>

    [Event(name="DataChange", type="DataChangeEvent")]

</mx:Metadata>
DataChangeEvent事件参数的定义:



CODE:import flash.events.Event;

public class DataChangeEvent extends flash.events.Event

{

       public function DataChangeEvent()

       {

              super("DataChange");

       }

       public var Data:Object;

}


在自定义控件中定义和触发事件:



CODE:<?xml version="1.0" encoding="utf-8"?>

<mx:Form xmlns:mx="http://www.adobe.com/2006/mxml" width="212" height="56">

<mx:Metadata>

        [Event(name="DataChange", type="DataChangeEvent")]

    </mx:Metadata>

<mx:Button label="Button" click="Change()"/>

       <mx:Script>

              <![CDATA[

                     function Change():void

                     {

                            this.dispatchEvent(new DataChangeEvent());

                     }

              ]]>

       </mx:Script>

</mx:Form>
容器接收相关自定义控件事件:



CODE:<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="*">

     

       <ns1:EmployeeCombo x="146" y="132" DataChange="onChange(event)" >

       </ns1:EmployeeCombo>

       <mx:Script>

              <![CDATA[

                     import mx.controls.Alert;

                     function onChange(e:DataChangeEvent)

                     {

                          

                     }

              ]]>

       </mx:Script>

</mx:Application>
其实自定义事件的现实也很简单,但起着非常重要的作用;正是因为有了事件的机制,使得大部分重复的功能抽取到自定义控件中,从而达到一个很高的代码重用性。
分享到:
评论

相关推荐

    深入浅出讲解flex中的事件机制

    通过上述示例,我们可以清楚地看到Flex中事件机制的基本原理及其在实际应用中的作用。理解`target`、`currentTarget`以及`useCapture`的概念对于开发高效、健壮的Flex应用程序至关重要。此外,合理利用事件传播的...

    Flex4.5事件机制

    Flex4.5事件机制是Flex应用程序开发中的核心组成部分,它基于ActionScript 3.0的事件模型,并且遵循DOM3级事件规范。事件机制使得开发者能够轻松响应用户交互和系统事件,为Flex程序员提供了强大且直观的处理工具。 ...

    Flex的事件机制笔记

    Flex事件机制是Adobe Flex应用程序开发中的核心组成部分,它允许组件之间进行有效的通信和交互。对于初级Flex程序员或爱好者来说,理解这一机制至关重要。在本文中,我们将深入探讨Flex事件的各个方面,包括事件流、...

    Flex事件机制详细说明

    在Flex框架中,事件是应用程序与用户交互的核心机制之一。它可以由多种触发源启动,包括但不限于用户的输入(如键盘按键、鼠标点击)、外部数据加载完成(例如WebService请求返回)或组件状态的变化(如组件创建或...

    flex事件机制的demo

    Flex ActionScript3.0事件机制的Demo, 举例说明了事件的三个阶段,事件的派发,事件的侦听,事件的拦截,自定义事件等相关知识点. 以上知识点在Demo中都有体现,初学者请仔细分析代码,加强理解,多调试、修改、验证以加深...

    Flex事件机制(通俗易懂)

    对于初学者而言,理解和掌握Flex中的事件机制是非常重要的一步。本文将深入探讨Flex事件机制的基础概念、事件注册通道、事件触发方式、事件分发机制等关键知识点,并尝试以简单明了的方式进行解释。 #### 二、事件...

    Flex 事件机制,flex入门学习

    Flex 事件机制是 Flex 应用程序中不可或缺的一部分,它使得组件之间能够有效地通信,响应用户交互以及管理应用程序状态。在深入理解 Flex 事件机制之前,我们需要先了解一下基本概念。 1. **事件的概念** 事件可以...

    flex事件机制的分发

    Flex事件机制是Adobe Flex框架中一个关键的概念,它允许组件之间通过事件进行通信。在Flex中,事件机制的分发主要包括三个主要阶段:捕获阶段、目标阶段和冒泡阶段。下面将详细介绍这些阶段以及自定义事件的创建与...

    flex事件机制分析

    Flex事件机制是Adobe Flex应用程序中处理用户交互和组件通信的核心组成部分。它主要涉及事件流、事件处理程序以及事件对象的概念,这些在构建富互联网应用程序(RIA)时扮演着至关重要的角色。下面将对这些概念进行...

    flex3事件机制的讲座

    郑老师关于flex3事件机制的讲座,讲的很好哦!

    Flex.3事件机制(3)——事件的应用实例视频

    Flex.3事件机制(3)——事件的应用实例视频Flex.3事件机制(3)——事件的应用实例视频

    关于flex事件的讲解

    很多新人对Flex的事件机制都不太熟悉,在使用过程中难免会出现各种问题,这是一个非常普遍的问题,为了更快更好的帮助大家,将介绍一下Flex中事件的各种机制和用法。 Flex的精髓之一就是事件和绑定机制,了解之后,...

    Flex.3事件机制(2)——Event对象视频

    Flex.3事件机制(2)——Event对象视频Flex.3事件机制(2)——Event对象视频Flex.3事件机制(2)——Event对象视频

    flex自定义事件、简单例子说明

    在Flex应用开发过程中,事件处理机制是非常重要的一个环节,而自定义事件则是这一机制中的高级特性之一。下面将详细介绍Flex自定义事件的相关知识点。 #### 1. 自定义事件的意义 在Flex应用中,事件是一种对象,...

    flex itemRenderer 渲染机制的概念和使用

    Flex中的itemRenderer是一种关键的组件渲染机制,它允许开发者自定义列表或数据集项的显示方式。在Flex应用中,特别是在处理数据集如ArrayCollection时,我们常常需要以不同的方式展示每个项目,例如图片、文本或者...

    flex的事件详解

    事件流是Flex事件处理的关键组成部分,它描述了事件对象如何在显示列表中传播。事件流分为三个阶段: 1. **捕获阶段**:事件从最顶层容器开始向下传播,直到达到目标对象。这一阶段主要用于提前捕获事件,以便在...

    Flex垃圾回收机制

    Flex垃圾回收机制是ActionScript 3.0中的一个重要概念,主要应用于Adobe Flex应用程序的内存管理。在Flex开发中,理解并掌握垃圾回收的工作原理对于优化应用程序性能和避免内存泄漏至关重要。 1. **垃圾回收的基本...

    flex控件事件

    Flex控件事件是Adobe Flex应用程序开发中的核心概念,主要用于实现用户交互和组件间的通信。在Flex中,控件(或称为组件)是构建用户界面的基本元素,如按钮、文本框、列表等。当用户与这些控件进行交互时,如点击...

    flex 官方文档 中文教程

    Flex的数据绑定机制使得UI组件的值可以自动与后台数据模型同步,简化了数据驱动的应用开发。通过双向数据绑定,用户界面的更改会立即反映到数据模型,反之亦然。 7. **事件处理** Flex中的事件模型允许开发者响应...

    flex 关于事件的例子

    Flex是Adobe公司开发的一种用于构建富互联网应用程序(RIA)的框架,主要基于...通过理解和实践这个“flex 关于事件的例子”,初学者能够掌握Flex中事件处理的基本原理和用法,为构建交互式Flex应用打下坚实基础。

Global site tag (gtag.js) - Google Analytics