1、事件流
事件传播依次经历”捕捉“,”目标“,”冒泡“,”目标“四个阶段
在捕捉和目标阶段:确定事件的传播路径,在该路径傻瓜寻找事件捕捉者,从最外层Application向底层查找。
目标和冒泡阶段:触发事件捕捉者来捕捉事件,同时把事件沿着路径继续向上传播,从底层向最外层查找。
2、技术要点
定义事件:
(1)引入事件类
import flash.events.Event;
(2)必须继承自flash,events,Event类
public class events1 extends Event;
(3)必须在自定义构造函数中调用基类的构造函数,同时传递时间类型
super(par_eventType);
(4)如果在事件中传播数据,则可以通过定义一个或多个公有变量来实现。
public var someString:String;
(5)自定义事件的列子
package myEvents
{
import flash.events.Event;
public class event1 extends Event
{
//自定义事件的名称
public static var EVENT_NAME:String="customEvent1";
//自定义时间携带数据变量
public var someString:String;
public function event1(par_enventName:String)
{
//调用基类的构造函数,传进去事件的名称,默认冒泡参数为false
super(par_enventName);
}
}
}
发出事件:事件的发起者将事件对象传播出去
button1.dispatchEvent(myEvent);
捕捉事件:事件捕捉者监听事件是否传递到此买捕捉到事件后将事件作为参数传递给响应函数进行处理
Panel1.addEventListener(event1.EVENT_NAME,panelCatchEvent1);
事件传播过程中当前经过的对象
事件在传播路劲上传播,被一个捕捉者捕捉到,id就是给捕捉者的id
private function panelCatchMyEvent(par_event:event1):void{
Alert.show(par_event,currentTarget.id);
}
在捕捉/目标阶段捕捉事件
如果在捕捉目标阶段捕捉事件,需要设置addEventListener函数的第三个参数useCapture为true,这样,事件监听函数就会在事件的捕捉阶段捕捉事件,默认情况下是设置成false的
Panel1.addEventListener(event1.EVENT_NAME,panelCatchEvent1,true);
在冒泡/目标阶段捕捉事件
要显示设置基类的构造函数的第二个参数设为true,同时addEventListener函数的覅三个参数usrCapture舍为false,或默认设置
super(par_eventName,true)
Panel1.addEventListener(event1.EVENT_NAME,panelCatchEvent1,false);
在捕捉/目标和冒泡/目标阶段都要捕捉事件
显式设置基类的构造函数的第二个参数设为true
super(par_eventName,true)
同时在需写两个时间监听函数addEventListener,将useCapture参数设为true,另一个为false
Panel1.addEventListener(event1.EVENT_NAME,panelCatchEvent1,true);
Panel1.addEventListener(event1.EVENT_NAME,panelCatchEvent1,false);
源代碼:
event1.as
package myEvents
{
import flash.events.Event;
public class event1 extends Event
{
//自定义事件的名称
public static var EVENT_NAME:String="customEvent1";
//自定义时间携带数据变量
public var someString:String;
public function event1(par_enventName:String)
{
//调用基类的构造函数,传进去事件的名称,默认冒泡参数为false
super(par_enventName,true);
}
}
}
main.mxml文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
//导入自定义事件类
import myEvents.event1;
<!--**************************************************************************
***初始化
***************************************************************************-->
private function init():void{
//Aplication监听字定义事件,设置usrCapture参数为true
this.addEventListener(event1.EVENT_NAME,appCatchMyEvent,false);
//Panel监听自定义事件,设置usrCapture参数true
this.Panel1.addEventListener(event1.EVENT_NAME,panelCatchMyEvent,false);
}
<!--**************************************************************************
***按钮发出的自定义事件
***************************************************************************-->
private function sendMyEvent(par_flg:int):void{
txtTatol.text="";
//定义事件实例
var myEvent:event1=new event1(event1.EVENT_NAME);
//发出事件
if(par_flg==1){
myEvent.someString="我是button1发出事件";
Button1.dispatchEvent(myEvent);
} else {
myEvent.someString="我是Button2发出的事件";
Button2.dispatchEvent(myEvent);
}
}
<!--**************************************************************************
***Application捕捉自定义事件,显示捕捉者的id和事件中携带的数据
***************************************************************************-->
private function appCatchMyEvent(par_event:event1):void{
txtTatol.text=txtTatol.text+par_event.currentTarget.id+"\n";
txtTatol.text=txtTatol.text+"捕捉到的事件:"+par_event.someString+"\n";
}
<!--**************************************************************************
***中间层Panel捕捉自定义事件
***显示捕捉者的id和事件中的携带的数据
***************************************************************************-->
private function panelCatchMyEvent(par_event:event1):void{
txtTatol.text=txtTatol.text+par_event.currentTarget.id+"\n";
txtTatol.text=txtTatol.text+"捕捉到的事件:"+par_event.someString+"\n";
}
]]>
</mx:Script>
<mx:Panel x="23" y="74" width="121" height="77" layout="absolute" id="Panel1">
<mx:Button x="10" y="10" label="Button1" id="Button1" click="sendMyEvent(1)"/>
</mx:Panel>
<mx:Button x="48" y="199" label="Button2" id="Button2" click="sendMyEvent(2)"/>
<mx:Spacer x="210" y="80" height="90" width="155"/>
<mx:Label x="137" y="52" text="事件捕捉结果:按照事件被捕捉的先后次序排序" width="338" height="20" enabled="true" fontWeight="bold" fontSize="15"/>
<mx:Label x="48" y="27" text="testEvent(即Application)"/>
<mx:TextArea x="0" y="229" width="485" height="121" id="txtTatol"/>
</mx:Application>