• flex>事件 小强斋


    Flex事件概述

    Flash/Flex中的事件是编写应用的基础,是和用户交互的基础。应用和用户之间的交互就是以事件为桥梁。

    应用对用户动作的响应相当于应用和外界的交互,而应用之间也有需要响应的事情,这相当于内部的交互。举个例子来说,用户单击了某个按钮,程序就应该做某些事情,这就是用户和外界的交互;而应用中某个数据的改变,应用其他部分也要随其做相应的改变就是内部交互。

    Flex事件机制

    1.什么是事件机制
    事件可以看作是一种触发机制,当满足了一定的条件后,会触发这个事件。比如MouseEvent就是指的当鼠标进行操作之后触发的一系列的事件。很多控件中都有click事件,这个事件就是一个MouseEvent的实例,当点击鼠标后,系统会自动抛出一个名称为click的MouseEvent事件。如果此时在click上注册一个方法,那么触发该事件时就会执行这个方法。

    事件的机制包括注册事件、触发事件、事件的传递

    事件注册:指将事件的处理函数指定给对象的一个事件,实际上是对该事件创建一个侦听器。事件被注册后,当事件发生后,就会调用注册的事件响应函数。

    事件触发:注册到对象上的事件发生时,就是事件的触发。事件触发后会调用注册在该事件上的事件响应函数,同时创建事件对象的一个实例,该实例会包含事件的信息。一个事件的信息包括以下几种:

    1)属性bubbles:布尔类型,显示该事件是否为冒泡事件;

    2)属性cancelable:布尔类型,显示是否可以阻止与事件相关联的行为;

    3)对象currentTarget:与当前事件相关联的对象。

    4)属性eventPhase:无符号整数,指示当前事件在整个事件流中的阶段;

    5)对象Target:触发事件的对象。也就是整个事件流的源头。在实际过程中使用currentTarget来处理事件的当前目标;

    6)字符串type:当前事件的类型。如事件是click,那这个值就是click。

    一个事件被触发后,一般经历3个阶段,第一阶段就是捕获阶段,Flex应用是一层一层的关系,比如顶级Application里面有一个容器Canvas,而Canvas里面有一个VBox,真正发生事件的是VBox里的一个按钮。当用户单击这个按钮时,实际上该事件会经历3个对象,第一个就是Application,第二个就是Canvas,第三个是VBox,最后才是事件注册的对象按钮。Click事件自上而下的进行查找点击对象的工作,这个过程就是捕获阶段。第二个阶段是目标锁定阶段,当自上而下找到事件注册并触发的对象时,Flex将会自动创建一个Event的实例。这个实例包括整个事件的相关信息。第三个阶段就是冒泡阶段,与前面捕获阶段相反冒泡阶段就是时间会向上一级传递。

    事件传递:对于处理时间来说,事件的传递是关键。一个事件被触发后,事件就开始冒泡,形成了一个事件流。

    Flex事件分发

    最终继承自EventDispatcher的对象都会含有dispatchEvent这个方法,他有一个参数,事件对象。之前说到的事件注册通道,他只是一个通道,实际上事件是由这个方法来分发出去的,通道只是一个管道而已。他的作用就是分发一个事件对象,他的分发是没有目的的,一种广播形式的,Flex的事件监听线程会接收到各种各样的事件(我们称之为捕获事件,这在后面会介绍到),那么哪种才是你要的事件,标识就通过事件的type属性来区分。

    1)Flex事件对象

    在分发事件时,将会分发一个事件对象出去。不管是那个事件类,都是继承自flash.events.Event对象的,他包含一些比较重要的属性,type和bubbles。
    type是事件的类型,事件监听通过这个参数来识别是否是自己所监听的事件。
    bubbles是个布尔值,决定了该对象是否会向上传递。默认是false。什么意思呢,
    比如说,当button组件分发click事件对象时,设置的bubbles为false,
    dispatchEvent(newMouseEvent(“click”,false));
    事件对象无法跨越组件本身,当然,除了之前讲到的注册通道(这样就很形象了吧)因此,如果没有注册通道,在Flex主应用中,就无法捕获到这个button组件分发出的事件。如果我们将Bubbles设为true,
    这个事件可以跨过组件本身,到达Flex主应用里。不止这样,在帮助手册中明确说到,如果在传递过程中间一直没有被捕获的话,这个事件会逐层上传,直到最终的stage,那时如果还没被捕获,这个事件就会被销毁掉。这样一来,即使我们没有click的事件通道,只要我们在Flex主应用中添加Flex事件监听器(addEventListener)那么我们就可以获得到这个分发出的click事件了。

    一、事件注册通道
    通道是只能在mxml的代码提示中可以看到的,他的作用就是给mxml组件提供 事件触发时所执行的方法的注册通道,而且能在代码提示中可见,这样给组件提供了很大的抽象的好处,我们可以很清楚的告诉组件的使用者,组件里包含哪些事件给你调用。
    Button的click事件是继承自核心类InteractiveObject,遗憾我们看不到他的源码,但是说明了“事件注册通道”是可以继承的。我们会在自定义事件中讲述到如何声明“事件注册通道”。


    该示意图对应的Flex主应用的mxml代码

    <mx:Script>
              <![CDATA[
                    import mx.controls.Alert;        
                    private function clickHandler(e:MouseEvent){
                          Alert.show(e.currentTarget.toString());
                    }
              ]]>
    </mx:Script>
    <mx:Button id="testBtn" click="clickHandler(event)" label="测试">
    </mx:Button>

    1、设计视图下图所示,拖一个Panel、一个Textarea、两个按钮到设计界面。

    2、源代码如下所示:

    <?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"
     creationComplete="init()">
    
     <fx:Script>
     <![CDATA[
     import mx.utils.OnDemandEventDispatcher;
     import spark.components.TextArea; 
    private function recordEvent(e:Event):void
     {
     writeLog(e.target.id + "被点击," + "当前对象" + e.currentTarget.id);
     e.stopPropagation();
     }
     private function writeLog(str:String):void
     {
     ta.text += str + "\n";
     }
     private function clear(e:Event):void
     {
     e.stopPropagation();
     ta.text = "";
     } 
    ]]>
     </fx:Script>
    
     <fx:Declarations>
     <!-- 将非可视元素(例如服务、值对象)放在此处 -->
     </fx:Declarations>
     <s:Panel width="204" height="231" click="recordEvent(event)" id="panel" x="15" y="15" title="事件触发与传递" fontSize="12">
     <s:TextArea x="17" y="7" id="ta" width="170"/>
     <s:Button x="17" y="164" label="点击" id="btn" click="recordEvent(event)"/>
     <s:Button x="117" y="164" label="清空" click="clear(event)"/>
     </s:Panel>
    
    </s:Application>
    

    3、编译运行,结果截图如下:

    二、事件监听

    在分发中,我们讲到,如果不是通过注册通道来调用触发事件,那么我们是需要一个监听来捕捉的。如何捕捉到分发出的事件,就是通过事件的type值。

    <mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" xmlns:comp
          creationComplete='init()'
    > 
    <mx:Script>
                    <![CDATA[
    private function init(){
                        testBtn.addEventListener(“click”, clickHandler);
    }

    Flex的事件中都提供了一些静态常量,让我们调用,避免我们打错了。因此这句话可以这么写
    testBtn.addEventListener(MouseEvent.CLICK,clickHandler);
    我们看到,监听的回调方法中没有传递参数,是的,这和通道的写法有些不同,这里的回调方法(即clickHandler)只是个引用,并不是代表方法的执行,他的含义是,告诉eventLinstener,如果捕捉到click事件,那么就去找clickHandler,并执行它,event对象参数在执行时动态的传递。

    三.绑定机制

     在我们了解了事件机制后,那么理解绑定就不难了。绑定其实也是事件机制的运用
    1.  什么是绑定
    绑定的原理就是事件,在被绑定的对象上增加了改变事件的监听,一旦某个被绑定对象改变后,就会分发一个“propertyChange”事件(默认的,也可以改变成自己定义的事件),在其他组件中,会有propertyChange的事件监听,当捕捉到该事件后,则会去更新组件的属性并显示。
    绑定的作用在于,将Flex中的变量、类、方法等与组件的值进行绑定。例如,一个变量如果被绑定后,那么引用该变量的组件的相关属性也会发生改变。我们用一个实例来表示

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute" xmlns:comp
          >
          <mx:Script>
              <![CDATA[
                    import mx.controls.Alert;            
                    [Bindable]
                    private var isSelected:Boolean;
                    private function clickHandler(e:MouseEvent){
                    //Alert.show(e.currentTarget.toString());
    isSelected=isSelected?false:true; //这句话的意思是如果isSelected为true,改变它为false,如果它为false,改变它为true;
                          Alert.show(isSelected.toString());
                    }
              ]]>
          </mx:Script>
          <mx:Button id="testBtn"  click="clickHandler(event)" label="测试" />
          <mx:CheckBox x="60" selected="{isSelected}" />
    </mx:Application>

    上述程序的效果就是,当点击button时,button不是直接改变checkbox的选中状态,而是改变isSelected这个变量,由于isSelected是被绑定了的,那么会关联的改变CheckBox的选中状态。
    这样看起来有些多此一举,完全可以直接改变checkbox的selected属性,我只是为了演示一下效果。如果说你的checkbox是动态构造的上百个,你不会去一个个的改变他吧。
    如果这个代码中取消了[Bindable]的声明,会怎么样?isSelected不会改变了吗?
    isSelected会改变,我们alert出来的结果也会显示结果改变了,但是checkbox的选择状态不会改变,因为当一个组件由创建到最终显示出来时是经过很多方法的,比如addChild,commitProperties,updateDisplayList等,updataDisplayList则是类似刷新显示效果一样的方法。
    仅仅改变属性,而不去更新显示效果那么组件不会因为属性的改变而发生任何变化。
      绑定的原理也是利用的事件分发。


    四.  自定义事件的分发

    1.  自定义事件 components/MyEventTest.as

    package components
    {
          import mx.events.FlexEvent;
          public class MyEventTest extends FlexEvent
          {
              public static const ONCHANGE:String = "onChange";
              public var eventInfo:String; //自定义的事件信息
              public function  MyEventTest(s:String){
                    super(s); //如果在构造时不设bubbles,默认是false,也就是不能传递的。
                    eventInfo="这个事件是:"+s;
              }
          }
    }
    
              

    2.        自定义组件 components/ComponentForEvent.as

    package components
    {
          import flash.events.EventDispatcher;
          //这个就是声明事件注册通道的方法了。name是事件对应的名称,也就是之前提到的type。Type是该事件的类
          [Event(name="onChange", type="components.MyEventTest")]
          public class ComponentForEvent extends EventDispatcher
          {
              private var name:String;
              public function changeName(newName:String){
                    this.name=newName;
                    dispatchEvent(new MyEventTest(MyEventTest.ONCHANGE) );
              }
          }
    }

    3.        App.mxml

    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:comp
    > 
    <mx:Script>
    <![CDATA[
    import mx.controls.Alert;
    private function  changeName(){
                        cfe.changeName("新名称");
    }
                    ]]>
    </mx:Script>
    <mx:Button id="testBtn"  click=" changeName ()" label="测试" />
    <components:ComponentForEvent
    id="cfe"  />
    </mx:Application>



     

  • 相关阅读:
    软件体系风格选择小结
    bert入门资料
    RNN入门和seq2seq
    推荐系统论文源码笔记——依次学习之DKN源码笔记
    Mac os下gcc编译错误解决方案
    ns3 安装方法
    angular http ajax header
    javascript 实现htmlEncode htmlDecode
    windows下的python扩展包下载地址
    php版DES
  • 原文地址:https://www.cnblogs.com/xiaoqiangzhaitai/p/5637555.html
Copyright © 2020-2023  润新知