FLEX/FLASH-冒泡事件与非冒泡事件

简介: 1. 项目 右键 新建 包 右键单击新建的包,新建 actionscript类 代码如下(代码1) package btnEvents{    import flash.events.Event;        public class btnEvent1 extends Event  ...

1.

项目 右键 新建 包

右键单击新建的包,新建 actionscript类

代码如下(代码1)

package btnEvents
{
    import flash.events.Event;
   
    public class btnEvent1 extends Event
    {
        public static var EVENT_NAME:String="customEvent";

        //该事件所携带的数据
        public var EventData:String;       
        public function btnEvent1(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
        {
            super(type, bubbles, cancelable);
        }
    }
}

 

2.

主MXML文件如下所示

<?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:Modules="Modules.*"
               creationComplete="init()"
               >

    <fx:Script>
        <![CDATA[
            import btnEvents.btnEvent1;
            private function init():void{
                this.addEventListener(btnEvent1.EVENT_NAME,appCatchMyEvent,true);
                this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,true);
            }
            private function sendEvent(flag:int):void{
                var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME);
                if(flag == 1){
                    Event.EventData = "内部按钮";
                    btn1.dispatchEvent(Event);//将事件分派到事件流中
                }else{
                    Event.EventData = "外部按钮";
                    btn2.dispatchEvent(Event);//将事件分派到事件流中
                }
            }
            private function appCatchMyEvent(par_event:btnEvent1):void{
                label1.text += par_event.currentTarget.id+par_event.EventData;//currentTarget是传播路径上的当前捕捉者
            }
            private function panelCatchEvent(par_event:btnEvent1):void{
                label1.text += par_event.currentTarget.id+par_event.EventData;
            }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <!-- 将非可视元素(例如服务、值对象)放在此处 -->
    </fx:Declarations>
    <s:Panel id="panel1" x="198" y="128" width="250" height="200">
        <s:Button click="sendEvent(1)" id="btn1" x="89" y="61" label="内部BTN"/>
    </s:Panel>
    <s:Button id="btn2" click="sendEvent(2)" x="378" y="360" label="外部BTN"/>
    <s:Label id="label1" x="198" y="66" text="事件来自~~~~" width="189"/>

</s:Application>

3.

运行程序

点击“内部BTN:

结果如图所示

image

大家可以看到
事件是从外层容器到内层容器依次执行的

 

4.

刷新页面

点击“外部BTN”

结果如图所示

image

因为事件的引发者没有在panl1中所以不会再触发panel1的事件了

 

以上说的都是非冒泡事件,事件的执行顺序是从外层容器到内层容器执行的

 

5.

如果要在事件冒泡阶段捕捉事件

创建事件的代码为

var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为true

事件监听的代码应如下

this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//最后一个参数useCapture是false

这样设置后就是冒泡事件,事件的执行顺序是从内层容器到外层容器执行的

 

6.

如果即要捕捉非冒泡事件,又要捕捉冒泡事件

那么

创建事件的代码为

var Event:btnEvent1=new btnEvent1(btnEvent1.EVENT_NAME,true);//最后一个参数bubbles应为true

同时,监听事件的代码还要设置两次

this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,true);//非冒泡监听
this.panel1.addEventListener(btnEvent1.EVENT_NAME,panelCatchEvent,false);//冒泡监听

这样设置之后,事件先从外部执行到内部,在从内部执行到外部

目录
相关文章
|
12月前
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
155 0
|
15天前
|
JavaScript 前端开发
|
15天前
|
JavaScript 前端开发
事件冒泡和事件捕获的原理和区别
【10月更文挑战第15天】事件冒泡和事件捕获的原理和区别
|
4月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
70 1
|
JavaScript 程序员
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
160 0
【JavaScript-事件】target和this的区别?如何阻止冒泡事件?常见的鼠标事件和键盘事件有哪些?
|
JavaScript 前端开发
DOM怎么阻止默认动作?怎么阻止冒泡事件?
有一些html元素默认的行为,比如说a标签,点击后有跳转动作; form表单中的submit类型的input有一个默认提交跳转事件;reset类型的input有重置表单行为。
111 0
|
JavaScript
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
116 0
这种方式写冒泡,更简单
接上一篇,来自我的好朋友,EvilSay 投稿的文章。以下是原文:
|
JavaScript 前端开发 容器
JavaScript事件处理的例子:事件捕捉和冒泡 - event capture and bubble
JavaScript事件处理的例子:事件捕捉和冒泡 - event capture and bubble
253 0
JavaScript事件处理的例子:事件捕捉和冒泡 - event capture and bubble
|
JavaScript 前端开发 数据安全/隐私保护
JavaScript之EventListener事件的传递顺序--冒泡和捕获传播
演示监听事件的传播顺序以及如何阻止这种传播。冒泡和捕获传播
1221 0