`
TracyKelvin
  • 浏览: 22641 次
  • 性别: Icon_minigender_1
  • 来自: 广州
最近访客 更多访客>>
社区版块
存档分类
最新评论

Flex事件机制--自定义事件

    博客分类:
  • Flex
阅读更多

通过[Event]元数据,开发者可以为组件定义事件,将组建和自定义事件关联起来,编译器能够把这些自定义的事件识别为组件属性(将事件名称作为组件的一个属性)

使用[Event]元数据的签名如下:

Event(name="eventName",type="package.eventType")]

name说明了事件的名称,而type表明了该名称对应的事件类型,事件侦听器使用name进行注册。可以为ActionScript组件和MXML组件定义定义事件。

ActionScript组件定义事件,[Event]元数据必须置于包(package)定义之内,类(class)定义之上,如下所示:

package com.esri.comm

{

    import spark.components.Button;

   

    //将事件和组件关联起来

    [Event(name="load",type="com.esri.comm.AppEvent")]

    public class But extends Button

    {

        public function But()

        {

            //TODO: implement function

            super();

        }

    }

}

------------------------------------------------------------------------------------------------

自定义事件和事件派发

自定义事件:

package com.esri.comm

{

    import flash.events.Event;

   

    //自定义一个事件

    public class AppEvent extends Event

    {

        public static const ERROR:String = "eror";

        public static const LOAD:String = "load";

        //type:事件类型

        public function AppEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)

        {

            super(type, bubbles, cancelable);

        }

       

    }

}

<?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" minWidth="955" minHeight="600"

              xmlns:components="com.esri.comm.*" creationComplete="init()">

    <fx:Declarations>

       <!-- 将非可视元素(例如服务、值对象)放在此处 -->

    </fx:Declarations>

    <fx:Script>

       <![CDATA[

           import com.esri.comm.AppEvent;

           //application的初始化

           private function init():void{

              //调用addEventListener可将事件监听器注册到对象,其中but1_appEventHandler为事件监听器,此处监听类型为loadAppEvent

              this.addEventListener("load",but1_appEventHandler,true);  //Application的对象text监听load事件,并在捕获阶段监听

              panel1.addEventListener(AppEvent.LOAD,but1_appEventHandler,true);//Panel的对象panel1监听load事件,并在捕获阶段监听

              buttn1.addEventListener(AppEvent.LOAD,but1_appEventHandler,false);//Button的对象buttn1监听load事件,并在目标阶段监听,因为buttn1是目标对象

             

              //调用addEventListener可将事件监听器注册到对象,其中but1_appEventHandler为事件监听器,此处监听类型为errorAppEvent

              this.addEventListener("error",but1_appEventHandler2,true);   //Application的对象text监听load事件,并在捕获阶段监听

              panel1.addEventListener(AppEvent.ERROR,but1_appEventHandler2,true);//Panel的对象panel1监听load事件,并在捕获阶段监听

              buttn2.addEventListener(AppEvent.ERROR,but1_appEventHandler2,false);//Button的对象buttn2监听load事件,并在目标阶段监听,因为buttn2是目标对象

           }

          

           //当发生事件时,AppEvent对象将作为参数传递给事件侦听器

           private function but1_appEventHandler(event:AppEvent):void

           {

              //currentTarget:当前正在使用某个事件侦听器处理Event的对象

              trace("load:"+event.currentTarget);

           }

           //当发生事件时,AppEvent对象将作为参数传递给事件侦听器

           private function but1_appEventHandler2(event:AppEvent):void

           {

              //currentTarget:当前正在使用某个事件侦听器处理Event的对象

              trace("error:"+event.currentTarget);

           }

           private function dispatchAppEvent(event:MouseEvent):void

           {

              //调用dispatchEvent方法派发事件的对象为目标对象,由flash player派发一个事件至目标对象buttn1

              buttn1.dispatchEvent(new AppEvent("load",false,false)); //不冒泡,即显示列表中的对象都可以监听到该事件

           }

           private function dispatchAppEvent2(event:MouseEvent):void

           {

              //调用dispatchEvent方法派发事件的对象为目标对象,由flash player派发一个事件至目标对象buttn2

              buttn2.dispatchEvent(new AppEvent("error",false,false)); //不冒泡,即显示列表中的对象都可以监听到该事件

           }

       ]]>

    </fx:Script>

    <s:Panel x="290" y="52" width="321" height="313" id="panel1" title="Panel">

       <s:Button id="buttn2" label="buttn2触发类型为errorAppEvent事件"  click="dispatchAppEvent2(event)" x="10" y="125" height="32" width="234"/>

       <s:Button id="buttn1" label="buttn1触发类型为loadAppEvent事件"  click="dispatchAppEvent(event)" x="10" y="47" height="32" width="234"/>

    </s:Panel>

</s:Application>

 

通过dispatchEvent方法触发事件后,将事件调度到事件流中,然后Flash Player会在事件流中检查显示列表中的每个节点对象是否注册了事件侦听器,如果注册了,则调用事件侦听器来完成针对事件的响应处理。

这里强调下几个概念:

一、事件的派发者(也就是目标对象):调用dispatchEvent方法派发事件的对象,只有EventDispatcher或其子类才能派发事件。

事件监听者:调用addEventListener方法监听事件的对象,只有显示列表中的对象才能捕获到事件,在监听的时候如果监听者不是目标对象,需要将addEventListener方法中的第三个参数即useCapture设置为true,也就是在捕获阶段监听事件。

备注:

Event 类作为创建 Event 对象的基类,当发生事件时,Event 对象将作为参数传递给事件侦听器。

EventDispatcher 类允许显示列表上的任何对象都是一个事件目标。在概念上,到事件目标的此往返行程被划分为三个阶段:

捕获阶段包括从根到事件目标节点之前的最后一个节点的行程;

目标阶段仅包括事件目标节点;

冒泡阶段包括回程上遇到的任何后续节点到显示列表的根,但不包括目标节点。

分享到:
评论

相关推荐

    FLEX 事件机制-自定义事件介绍

    在Flex编程中,事件机制是实现组件间通信和交互的关键部分。自定义事件允许开发者创建特定于应用的事件类型,以便更好地控制数据流动和响应处理。以下是对FLEX自定义事件的详细介绍: 首先,自定义事件是通过继承...

    跟我StepByStep学FLEX教程------王一松

    - **自定义事件**:了解如何创建自定义事件类以及如何分发这些事件。 - **自定义组件**:教授如何扩展Flex内置组件或从头开始创建新组件。 #### 13. Demo7:页面跳转 - **导航架构**:介绍Flex中用于实现页面跳转...

    arcgis-viewer-builder-flex-3.6-src.zip

    这个名为“arcgis-viewer-builder-flex-3.6-src.zip”的压缩包包含了该版本的源代码,对于深入理解和自定义开发ArcGIS应用程序具有极高的价值。 1. **FlexViewer 3.6概述** FlexViewer是Esri公司推出的一个开源...

    flex事件机制的demo

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

    flex自定义组件事件DEMO

    总之,"flex自定义组件事件DEMO"提供了一个深入理解Flex自定义组件和事件机制的实践平台。通过这个DEMO,开发者可以学习到如何有效地扩展Flex组件库,构建具有交互性和复杂性的用户界面。记得动手实践,不断探索和...

    flex-iframe-1.4.1.zip

    Flex-Iframe的核心功能是提供了一个灵活且可自定义的框架,允许开发者在页面中无缝集成外部内容,比如视频、地图、文档预览等。在1.4.1版本中,开发者可以期待以下关键特性: 1. **响应式设计**:Flex-Iframe支持...

    Flex事件机制详细说明

    ### Flex事件机制详解 #### 一、事件简介 在Flex框架中,事件是应用程序与用户交互的核心机制之一。它可以由多种触发源启动,包括但不限于用户的输入(如键盘按键、鼠标点击)、外部数据加载完成(例如WebService...

    flex事件机制的分发

    总的来说,Flex事件机制是通过事件流的分发实现组件间的交互,自定义事件则提供了更灵活的数据传递和处理方式。理解并熟练运用这一机制,能帮助开发者更好地设计和实现复杂的Flex应用程序。对于Flex开发者来说,掌握...

    Flex 事件机制,flex入门学习

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

    flex-autocomplete-master.zip_flex

    在探索这个"flex-autocomplete-master"项目时,你可以学习到如何结合ActionScript和MXML编写自定义组件,以及如何实现数据绑定和事件驱动的编程。此外,你还可以了解到如何优化用户体验,确保自动完成功能既快速又...

    arcgis-viewer-flex-3.7-src

    通过对"arcgis-viewer-flex-3.7-src"源码的深入学习,开发者不仅可以掌握ArcGIS Viewer for Flex的工作机制,还能提升在Flex和GIS领域的开发技能,从而构建出符合特定需求的、具有高性能的地图应用。同时,这也是一...

    flex事件机制分析

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

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

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

    Flex事件机制(通俗易懂)

    ### Flex事件机制详解 #### 一、引言 Flex是一个强大的框架,用于构建高性能的Web应用程序。对于初学者而言,理解和掌握Flex中的事件机制是非常重要的一步。本文将深入探讨Flex事件机制的基础概念、事件注册通道、...

    Flex的事件机制笔记

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

    arcgis-viewer-flex-3.4-src框架源码

    或者利用事件监听机制,添加新的功能模块。同时,通过修改XML配置文件,可以方便地调整用户界面布局和应用的行为。 此外,ArcGIS Viewer Flex 3.4 还支持与后端服务器的交互,可以结合RESTful服务进行数据交换,...

    Flex 主题--Brownie

    Flex提供了一种强大的机制,即MXML和CSS(Cascading Style Sheets)的结合,用于定义和应用主题。开发者可以通过自定义皮肤类和样式表来改变组件的视觉呈现。Brownie主题利用了这一机制,创建了一个深色背景和高对比...

    Flex开发实例--学习必备

    - Flex应用程序中的事件处理非常关键。 - 事件对象提供了有关触发事件的信息,例如事件类型、源对象等。 #### 18. DataGrid控件 - **DataGrid** 是一个表格组件,用于展示大量数据。 - 支持排序、过滤等功能,可以...

Global site tag (gtag.js) - Google Analytics