`
madfroghe
  • 浏览: 123410 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

事件机制

    博客分类：
  • Flex
CSSFlashAdobeXMLFlex 
阅读更多

事件机制的工作流程

个人注解：当触发事件后，flashplayer会有捕获，目标，冒泡的事件流，监听的事件只能选择捕获阶段或目标，冒泡阶段被触发（目标和冒泡属于同一阶段），第三个参数是打开捕获，事件在捕获阶段会触发
canvas_1.addEventListener(MouseEvent.CLICK,pressBtn,true); 

另外主要需要了解图形的显示列表来理解事件流，如下图（以下面第一个程序为例），在btn_1处触发事件时，事件的流动



 

 

8.2.1 关于事件流

目标对象：派发事件的对象
当事件发生后生成一个携带数据的对象，然后检查目标对象是否存在显示层中，并遍历从根容器一直到目标对象所在位置的所有对象，以树形势表示。自动检测所经过的节点是否注册了监听器。

事件流暗运行流程分为3步：
  • 捕获阶段：捕获事件 capturing，从根节点开始顺序而下，检测每个节点是否注册了监听器。同时，Flex 将事件对象的currentTarget 值改为当前正在检测的对象。如果注册了监听器，则调用监听函数。
  • 目标阶段：检测目标的监听器 targeting：触发在目标对象本身注册的监听程序
  • 冒泡阶段：事件冒泡 bubbling：从目标节点到根节点，检测每个节点是否注册了监听器，如果有，则调用监听函数。

每个事件对象都有以下属性：
target：事件的派发者
currentTarget：当前正在检测的的对象，帮助跟踪事件传播的过程。

默认情况下，捕获功能处于关闭状态，一般没有必要进行捕获跟踪。
事件只在bubbles 属性为true 时才进行冒泡，可以冒泡的事件包括：change、click、doubleClick、keyDown、keyUp、mouseDown、 mouseUp。并且不能在一个监听器中同时打开捕获和冒泡功能，要做到这一点，只能注册两个监听器，分别实现。

现在来看一个例子：
Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">     
  3.     <mx:Style source="style.css" />  
  4.      
  5.     <mx:Script>  
  6.         <![CDATA[ 
  7.             import flash.events.MouseEvent; 
  8.             
  9.             internal function initApp():void{ 
  10.                 canvas_1.addEventListener(MouseEvent.CLICK,pressBtn,true); 
  11.                 canvas_2.addEventListener(MouseEvent.CLICK,pressBtn); 
  12.                 btn_1.addEventListener(MouseEvent.CLICK,pressBtn); 
  13.                 btn_2.addEventListener(MouseEvent.CLICK,pressBtn); 
  14.             } 
  15.             internal function output(msg:String):void{ 
  16.                 debug_txt.text += msg+"\n"; 
  17.             }            
  18.             internal function pressBtn(evt:MouseEvent):void{ 
  19.                 output("是否冒泡--"+evt.bubbles); 
  20.                 output("目标对象-- "+evt.target+" -- "+evt.eventPhase); 
  21.                 output("遍历对象-- "+evt.currentTarget); 
  22.                 output("------------"); 
  23.             } 
  24.         ]]>  
  25.     </mx:Script>  
  26.     <mx:Canvas id = "canvas_1" styleName="box" x="37" y="63" width="445" height="216">  
  27.         <mx:Text x="13" y="10" text="Canvas_1"/>  
  28.         <mx:Canvas id="canvas_2" styleName="box" x="10" y="102" width="173" height="90">  
  29.             <mx:Text x="10" y="10" text="Canvas_2"/>  
  30.             <mx:Button id = "btn_2" x="10" y="38" label="Button_2"/>             
  31.         </mx:Canvas>  
  32.         <mx:Button id="btn_1" x="16" y="38" label="Button_1"/>  
  33.     </mx:Canvas>  
  34.     <mx:TextArea id="debug_txt" styleName="textBox" x="37" y="304" height="198" width="445"/>  
  35.      
  36. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">   
    <mx:Style source="style.css" />
   
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
           
            internal function initApp():void{
                canvas_1.addEventListener(MouseEvent.CLICK,pressBtn,true);
                canvas_2.addEventListener(MouseEvent.CLICK,pressBtn);
                btn_1.addEventListener(MouseEvent.CLICK,pressBtn);
                btn_2.addEventListener(MouseEvent.CLICK,pressBtn);
            }
            internal function output(msg:String):void{
                debug_txt.text += msg+"\n";
            }           
            internal function pressBtn(evt:MouseEvent):void{
                output("是否冒泡--"+evt.bubbles);
                output("目标对象-- "+evt.target+" -- "+evt.eventPhase);
                output("遍历对象-- "+evt.currentTarget);
                output("------------");
            }
        ]]>
    </mx:Script>
    <mx:Canvas id = "canvas_1" styleName="box" x="37" y="63" width="445" height="216">
        <mx:Text x="13" y="10" text="Canvas_1"/>
        <mx:Canvas id="canvas_2" styleName="box" x="10" y="102" width="173" height="90">
            <mx:Text x="10" y="10" text="Canvas_2"/>
            <mx:Button id = "btn_2" x="10" y="38" label="Button_2"/>           
        </mx:Canvas>
        <mx:Button id="btn_1" x="16" y="38" label="Button_1"/>
    </mx:Canvas>
    <mx:TextArea id="debug_txt" styleName="textBox" x="37" y="304" height="198" width="445"/>
   
</mx:Application>
  在监听函数 pressBtn 中的属性说明：
  • target：派发事件的目标对象
  • currentTarget：事件流当前正经过的目标对象
  • bubbles：是否打开了冒泡功能
  • eventPhase：事件流当前的阶段，1：捕获，2：目标，3：冒泡


addEventListener(
  type:String,    事件的类型
  listener:Function,    监听函数
  useCapture:Boolean = false,    是否打开捕获功能
  priority:int = 0,    监听器优先级别
  useWeakReference:Boolean = false    是否使用弱引用
)

如果useCapture 为true，打开了捕获功能，则该组件的冒泡阶段被取消。
只有可视化的对象有3个阶段，而像XML等非可视化对象只有目标阶段。

 

 

8.2.2 事件对象

EventDispatcher 是派发事件的武器，经它派发的事件对象必须是Event类型或者Event的子类。
Event对象中包含目标对象存放的数据，这些数据都成为Event的属性，以供侦听器使用：
Event的属性：
  • bubbles：只读，布尔，事件是否开启冒泡功能
  • cancelable：只读，布尔，处理事件的默认行为是否可以停止。主要针对一些系统事件，如果值为true，则Event的preventDefault方法可以使用，否则不可用。
  • currentTarget：只读，对象，当前正在调用监听器的对象
  • eventPhase：只读，整数，返回事件流正经历的阶段。1：捕获，2：目标，3：冒泡
  • target：只读，派发事件的目标对象
  • type：只读，字符，事件类型。比如鼠标点击事件的类型：click，并被定义为常量：MouseEvent.CLICK

构造函数：
Event(
  type:String,    事件类型
  bubbles:Boolean = false,   是否冒泡
  cancelable:Boolean = false  是否可以停止
)

Event 的方法：
  • isDefaultPrevented：判断preventDefault 是否已经被调用
  • preventDefault：停止事件的默认行为。针对一些系统事件，cancelable为true时才可用。
  • stopImmediatePropagation：停止当前的事件流传播，包括当前正在处理的对象
  • stopPropagation：停止当前的事件流传播，但不会停止当前正在处理的对象

 

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">     
  3.     <mx:Style source="style.css" />  
  4.      
  5.     <mx:Script>  
  6.         <![CDATA[ 
  7.             import flash.events.MouseEvent; 
  8.             
  9.             internal function initApp():void{ 
  10.                 canvas_1.addEventListener(MouseEvent.CLICK,CanvasHandler); 
  11.                 canvas_2.addEventListener(MouseEvent.CLICK,CanvasHandler); 
  12.                 canvas_2.addEventListener(MouseEvent.CLICK,pressBtn); 
  13.                 btn_1.addEventListener(MouseEvent.CLICK,pressBtn); 
  14.             } 
  15.             internal function output(msg:String):void{ 
  16.                 debug_txt.text += msg+"\n"; 
  17.             } 
  18.             
  19.             internal function pressBtn(evt:MouseEvent):void{ 
  20.  
  21.                 output("是否冒泡--"+evt.bubbles); 
  22.                 output("目标对象-- "+evt.target+" -- "+evt.eventPhase); 
  23.                 output("遍历对象-- "+evt.currentTarget); 
  24.                 output("------------");        
  25.             } 
  26.             internal function CanvasHandler(evt:MouseEvent):void{ 
  27.                 
  28.                 output("目标对象-- "+evt.currentTarget+" -- "+evt.eventPhase); 
  29.                 //停止事件流的传播 
  30.                 evt.stopImmediatePropagation(); 
  31.                 //evt.stopPropagation(); 
  32.             } 
  33.         ]]>  
  34.     </mx:Script>  
  35.     <mx:Canvas id = "canvas_1" styleName="box" x="37" y="63" width="425" height="160">  
  36.         <mx:Text x="13" y="10" text="Canvas_1"/>  
  37.         <mx:Canvas id="canvas_2" styleName="box" x="10" y="52" width="173" height="90">  
  38.             <mx:Text x="10" y="10" text="Canvas_2"/>  
  39.             <mx:Button id = "btn_1" x="10" y="38" label="Button_1"/>             
  40.         </mx:Canvas>  
  41.     </mx:Canvas>  
  42.     <mx:TextArea id="debug_txt" styleName="textBox" x="37" y="245" height="198" width="425"/>  
  43.      
  44. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">   
    <mx:Style source="style.css" />
   
    <mx:Script>
        <![CDATA[
            import flash.events.MouseEvent;
           
            internal function initApp():void{
                canvas_1.addEventListener(MouseEvent.CLICK,CanvasHandler);
                canvas_2.addEventListener(MouseEvent.CLICK,CanvasHandler);
                canvas_2.addEventListener(MouseEvent.CLICK,pressBtn);
                btn_1.addEventListener(MouseEvent.CLICK,pressBtn);
            }
            internal function output(msg:String):void{
                debug_txt.text += msg+"\n";
            }
           
            internal function pressBtn(evt:MouseEvent):void{

                output("是否冒泡--"+evt.bubbles);
                output("目标对象-- "+evt.target+" -- "+evt.eventPhase);
                output("遍历对象-- "+evt.currentTarget);
                output("------------");       
            }
            internal function CanvasHandler(evt:MouseEvent):void{
               
                output("目标对象-- "+evt.currentTarget+" -- "+evt.eventPhase);
                //停止事件流的传播
                evt.stopImmediatePropagation();
                //evt.stopPropagation();
            }
        ]]>
    </mx:Script>
    <mx:Canvas id = "canvas_1" styleName="box" x="37" y="63" width="425" height="160">
        <mx:Text x="13" y="10" text="Canvas_1"/>
        <mx:Canvas id="canvas_2" styleName="box" x="10" y="52" width="173" height="90">
            <mx:Text x="10" y="10" text="Canvas_2"/>
            <mx:Button id = "btn_1" x="10" y="38" label="Button_1"/>           
        </mx:Canvas>
    </mx:Canvas>
    <mx:TextArea id="debug_txt" styleName="textBox" x="37" y="245" height="198" width="425"/>
   
</mx:Application>

 

8.2.3 侦听和响应事件--一个侦听键盘事件的例子

要侦听一个事件，首先要创建一个函数来作为事件处理器，然后将这个函数注册给相应的时间类型。
this.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler);
注册键盘按下事件，交给keyHandler处理，也可以在Application标签添加事件：
keyDown="keyHandler(event)"  这种情况无法移除事件。

注册了事件监听器，使用完毕后，必须使用removeEcentListener 方法删除监听函数：
removeEcentListener(
  type:String,   事件类型
  listener:Function,   监听函数
  useCapture:Boolean = false    是否开启捕获功能，如果注册时打开，移除也要打开。
)

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  
  3.      creationComplete="initApp()">  
  4.     <mx:Style source="style.css" />     
  5.     <mx:Script>  
  6.         <![CDATA[ 
  7.             import flash.events.KeyboardEvent; 
  8.  
  9.             internal function initApp():void{ 
  10.                 this.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler); 
  11.             } 
  12.  
  13.             private function keyHandler(e:KeyboardEvent):void{ 
  14.  
  15.                 var str:String = "你按下的是: "+e.keyCode;                
  16.                 debug_txt.text += str +"\n"; 
  17.             } 
  18.         ]]>  
  19.     </mx:Script>     
  20.     <mx:TextArea id="debug_txt" styleName="textBox" x="25" y="78" height="198" width="212" editable="false"/>  
  21.     <mx:Text x="25" y="50" text="按键盘上的任意键"/>  
  22. </mx:Application>  
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     creationComplete="initApp()">
    <mx:Style source="style.css" />   
    <mx:Script>
        <![CDATA[
            import flash.events.KeyboardEvent;

            internal function initApp():void{
                this.addEventListener(KeyboardEvent.KEY_DOWN,keyHandler);
            }

            private function keyHandler(e:KeyboardEvent):void{

                var str:String = "你按下的是: "+e.keyCode;               
                debug_txt.text += str +"\n";
            }
        ]]>
    </mx:Script>   
    <mx:TextArea id="debug_txt" styleName="textBox" x="25" y="78" height="198" width="212" editable="false"/>
    <mx:Text x="25" y="50" text="按键盘上的任意键"/>
</mx:Application>
 
  • 大小: 12.1 KB
分享到：
| RegExp --正则表达式
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    java中的事件机制

    Java中的事件机制是Java编程中一个重要的概念，它基于观察者模式（Observer Pattern）来实现对象之间的通信。观察者模式是一种行为设计模式，允许你定义一个订阅机制，可以在对象状态改变时通知多个“观察”该对象的...

    JavaScript事件机制详细研究

    JavaScript 事件机制详细研究 JavaScript 事件机制是指浏览器中发生的各种事件，例如点击、鼠标悬停、键盘输入等，JavaScript 通过捕捉这些事件来执行相应的操作。本文将详细介绍 JavaScript 事件机制的实现方式和...

    openlayer事件机制介绍

    事件机制是OpenLayers的核心部分，它使得用户与地图进行交互成为可能。在OpenLayers中，事件机制主要涉及到控件（Controls）和处理器（Handlers）的概念。 控件在OpenLayers中扮演着重要的角色，它们是附加到地图上...

    Java事件机制例子

    Java事件机制基于观察者模式，其中事件源（如按钮）会发布事件，而事件监听器则订阅这些事件并执行相应的操作。 事件、事件监听器和事件源是Java事件处理的三个核心概念。事件是用户或系统发生的某种情况，如鼠标...

    Qt中的事件机制

    ### Qt中的事件机制详解 #### 一、事件的分类与特性 在Qt中，事件机制是框架的核心之一，用于管理用户界面与用户的交互过程。事件根据其产生方式的不同，可以分为三类：自发事件(Spontaneous events)、发布事件...

    reactnative触摸事件机制详解及高仿微信通讯录功能

    本文将深入探讨React Native的触摸事件机制，并展示如何利用这一机制实现类似微信通讯录的功能。 首先，我们要了解React Native中的触摸事件系统。与Web开发中的点击事件不同，React Native使用了一套基于 ...

    c#事件机制归纳,c#事件机制归纳,c#事件机制归纳

    C# 事件机制归纳 C# 事件机制是指在 C# 编程语言中实现事件处理的机制，包括委派、事件和事件处理过程。以下是对 C# 事件机制的详细归纳： 一、委派 委派是指一种特殊的方法签名，可以将方法作为参数传递，用于...

    flex事件机制的demo

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

    spring事件机制

    Spring框架的事件机制是其核心特性之一，它提供了一种基于发布-订阅模式的事件处理方式，使得在Spring应用中的不同组件之间可以进行解耦通信。这个机制允许一个组件（通常是一个服务）触发一个事件，然后其他感兴趣...

    使用Spring事件机制实现异步的方法

    使用Spring事件机制实现异步的方法 Spring框架提供了一种事件机制，允许开发者将代码解耦合，实现松散耦合的设计理念。这里将详细介绍如何使用Spring事件机制实现异步的方法。 事件机制的实现主要包括三个部分：...

    android 事件机制

    安卓事件机制的描述，包括安卓的进程通信机制、view事件的传递机制以及安卓的广播机制。

    Qt事件机制浅析

    ### Qt事件机制浅析 #### 一、什么是事件？ 在Qt框架中，事件是指系统或应用程序内部发生的某种“动作”，这种“动作”需要被特定的对象所感知并作出响应。这里的“动作”是一种广义上的概念，既包括用户交互操作...

    Flex4.5事件机制

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

    PHP 事件机制(2)

    在上一个版本的事件机制中，可能涉及了复杂的事件监听器和触发器的实现，而在这个版本中，主要目标是简化这一过程。我们来看一下具体实现。 首先，定义了一个名为`Event`的类，它继承自`stdClass`。`Event`类有两个...

    Android事件机制测试项目

    在Android开发中，事件机制是应用交互的核心部分，它使得用户与应用程序之间的沟通变得顺畅。这个"Android事件机制测试项目"旨在深入理解并实践这一关键功能。以下将详细阐述Android事件处理的相关知识点。 首先，...

    Visual C++事件机制线程同步工程

    在IT领域，线程同步和事件机制是多线程编程中的关键概念，特别是在Windows系统下，Visual C++提供了丰富的工具来实现这些功能。本项目"Visual C++事件机制线程同步工程"着重于如何利用事件对象（CEvent）进行线程间...

    Flex 事件机制，flex入门学习

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

    js事件机制 .pdf

    ### JavaScript事件机制详解 #### 一、引言 在学习编程语言的过程中，"事件"这一概念往往是初学者遇到的一个难点，然而它又是编程中极为重要的一个组成部分。在JavaScript中，事件处理更是不可或缺的一部分，它是...

    Flex事件机制详细说明

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

    Flex的事件机制笔记

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

Magicbox
Global site tag (gtag.js) - Google Analytics