在网上浏览了几篇文章,大体总结了一下,简单说明如下:
事件的传递分为三个阶段,如图:捕获阶段(Capture Phase)、目标阶段、冒泡阶段,比如当你点击了一下Child1 Node时,事件会从Stage->Parent Node->Child1 Node一路传过来(捕获阶段),传到Child1 Node时,执行Child1 Node的相应事件函数(目标阶段),然后传回Stage(冒泡阶段)。
1、 创建一个Flex Project,名称为:Demo;
2、 切换到Design模式下,添加一个Panel和一个Button,其效果如下:
3、 切换到Source模式下,为程序添加事件,其代码如下:
<?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">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function showDif(event:MouseEvent):void
{
Alert.show("目标ID = " + event.target.id +
"\n 当前目标ID = " + event.currentTarget.id);
}
]]>
</fx:Script>
<s:Panel x="104" y="113" width="250" height="200"
title="target和currentTarget" fontSize="14"
fontFamily="Times New Roman" color="#F30909"
id="panel_object">
<s:Button x="89" y="54" label=" 测 试 " id="button_object"
click="showDif(event)"/><!—事件由Button控制-->
</s:Panel>
</s:Application>
单击测试按钮,效果如下:
4、 修改源程序,事件由Panel触发,代码如下:
<?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">
<fx:Script>
<![CDATA[
import mx.controls.Alert;
private function showDif(event:MouseEvent):void
{
Alert.show("目标ID = " + event.target.id +
"\n 当前目标ID = " + event.currentTarget.id);
}
]]>
</fx:Script>
<s:Panel x="104" y="113" width="250" height="200"
title="target和currentTarget" fontSize="14"
fontFamily="Times New Roman" color="#F30909"
id="panel_object" click="showDif(event)"><!—事件由Panel触发-->
<s:Button x="89" y="54" label=" 测 试 " id="button_object" />
</s:Panel>
</s:Application>
运行程序后,点击测试按钮以及点击Panel面板,效果如下:
记住:
① target对象总是抛出事件的对象,currentTarget对象是处理事件的对象,很多情况下他们是相同的,但不总是这样。
② 所有Event对象都有target 和currentTarget属性,target 属性可引用事件分派对象,currentTarget属性可引用正在被检测事件监听器的当前节点。
③ 在事件将在控件链中向上冒泡,在此过程中target 始终不变,currentTarget在每个向上移动的过程中及时改变。
④ 例如当用户点击一个Button控件,很可能事件派发者是Button的内部子组件UITextField,事件向上冒泡过程中target 始终为 UITextField不变,但currentTarget会逐步冒泡到Button组件,这时,触发了在Button上监听的Click事件处理函数。
⑤ 开发人员一般使用event.currentTarget属性,event.target 属性很少使用。
事件流机制分为三个阶段:捕获、目标、冒泡。
addEventListener默认关闭了捕获阶段,打开冒泡阶段。并且捕获和冒泡阶段貌似是不能共存的。
一、没有捕获阶段(默认执行)具体是怎么执行的呢?
比如说有abc三个容器。同时对abc三个容器进行单击监听。
a.addEventListener(MouseEvent.CLICK,clickHandle);
b. addEventListener(MouseEvent.CLICK,clickHandle);
c. addEventListener(MouseEvent.CLICK,clickHandle);
我单击了c容器。
1、首先执行的是目标阶段。也就是我鼠标单击事件的目标是c容器,执行c容器的clickHandle函数。目标阶段完成。
2、冒泡阶段:将单击的事件冒泡上去,b获得了单击事件,执行clickHandle函数。然后就是c获得单击事件,执行clickHandle函数。
二、打开捕获
打开捕获阶段是怎么样的呢?
我单机了c容器。
1、捕获开始。a捕获到了单击事件执行函数。然后是b捕获到了单击事件执行函数。捕获阶段结束。
2、目标阶段开始。事件流终于流到了目标c,执行c的clickHandle函数。
========----- 以下内容于 2010-02-27 02:06:13 追加 -----========
总结:1、捕获关闭后,顺序cba,由目标冒泡到父容器,一层一层上去。捕获打开后,顺序abc,由父容器一层一层下去直到目标事件。
2、事件evt:MouseEvent中evt的重要属性有:evt.target(事件目标,指c)、evt.currentTarget(当前事件所处的目标,指冒泡或者捕获阶段当前目标)。