参考:

ActionScript 3.0 Step By Step系列(六):学对象事件模型,从点击按扭开始

actionscript宝典

一、事件模型

egret中的事件模型和flash是一样的,但是年代太久了,都忘了。

之前貌似是看殿堂之路还是哪本书,记不清了。

二、测试

下面测试一下,当有3个层级的对象监听事件时,事件触发的顺序。

创建3个方块,分别为out、mid、inner。 层级关系为out最外层,mid中间层,inner最里层。

class HomeScene extends eui.Component{
private out:eui.Rect;
private mid:eui.Rect;
private inner:eui.Rect; public constructor() {
super();
this.skinName = "HomeSceneSkin";
} protected childrenCreated(){
this.out = new eui.Rect(300,300,0xff0000);
this.out.touchChildren = true;
this.addChild(this.out); this.mid = new eui.Rect(200,200,0x00ff00);
this.mid.touchChildren = true;
this.out.addChild(this.mid); this.inner = new eui.Rect(100,100, 0x0000ff);
this.inner.touchChildren = true;
this.mid.addChild(this.inner); this.out.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("out");
},this); this.mid.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("mid");
},this); this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner");
},this); this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner2");
},this);
}
}

  

点击inner,输出

点击mid,输出

点击out,输出

总结:

从测试结果来看

捕获阶段:点击inner时,进入捕获阶段,从out->mid->inner

目标阶段:当找到inner时,第一个输出"inner"

冒泡阶段:在冒泡阶段时,会从inner->mid->out顺序冒泡,所以依次输出的是"mid"、"out"

所以测试结果还是符合事件模型的。

三、stopImmediatePropagation

防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理

在inner中增加stopImmediatePropagation

		this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner");
e.stopImmediatePropagation();
},this);

点击inner,输出

可见防止了当前节点inner2和后继节点mid、out的节点事件侦听

四、stopPropagation

防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理

		this.inner.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("inner");
e.stopPropagation();
},this);

点击inner,输出

可见防止了后继节点mid和out的事件侦听

五、target和currentTarget

		this.out.addEventListener(egret.TouchEvent.TOUCH_TAP, (e:egret.TouchEvent)=>{
console.log("out");
console.log(e.target.width); //100
console.log(e.currentTarget.width); //300
},this);

点击inner,输出

可见目标阶段对象e.target是inner,最终冒泡的对象e.currentTarget是out

  

stopImmediatePropagation和stopPropagation (事件、防止侦听)的更多相关文章

  1. 浏览器标签tab窗口切换时事件状态侦听

    做到 是大屏项目,用的websocket,在浏览器切换标签窗口后,过了一段时间回来,页面会非常卡,所以想页面切回来的时候刷新页面,找到了这个方法,这是原来的例子.这段代码可以自己复制去做下测试 var ...

  2. Laravel 事件侦听的几个方法 [Trait, Model boot(), Observer Class]

    1 Trait 1.1 可以在 Trait 中定义一个静态的 bootFooBar() 方法,注:FooBar 是你的 Trait 名称 namespace App\Traits; use App\A ...

  3. JavaScript DOM高级程序设计 4.3控制事件流和注册事件侦听器--我要坚持到底!

    一.事件流 我们通过下面一个实例,进行说明. <body> <h1>Event Flow</h1> <ul id="nav"> &l ...

  4. javascript中事件总结&通用的事件侦听器函数封装&事件委托

    前言: JAVASCRIPT与HTML之间的交互是通过事件来实现的.事件,就是文档或浏览器窗口中发生的一些特定交互瞬间.可以使用侦听器( 或处理程序 )来预定事件,以便事件发生时执行相应的代码.这种在 ...

  5. Unity3D 自定义事件(事件侦听与事件触发)

    先来看下效果图,图中点击 Cube(EventDispatcher),Sphere(EventListener)以及 Capsule(EventListener)会做出相应的变化,例子中的对象相互之间 ...

  6. js事件流、事件处理程序/事件侦听器

    1.事件流 事件冒泡 IE的事件流叫做事件冒泡(event bubbling),即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到较为不具体的节点(文档). 事件捕获 ...

  7. Android事件侦听器回调方法浅谈

    http://developer.51cto.com/art/201001/180846.htm Android事件侦听器作为视图View类的接口,其中包含有不少回调方法,比如:onClick():o ...

  8. 异常将上下文初始化事件发送到类的侦听器实例.[org.springframework.web.context.ContextLoaderListener] org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'sessionFactory' defined in class p

    严重: 异常将上下文初始化事件发送到类的侦听器实例.[org.springframework.web.context.ContextLoaderListener]org.springframework ...

  9. vue02 过滤器、计算和侦听属性、vue对象的生命周期、阻止事件冒泡和刷新页面

    3. Vue对象提供的属性功能 3.1 过滤器 过滤器,就是vue允许开发者自定义的文本格式化函数,可以使用在两个地方:输出内容和操作数据中. 定义过滤器的方式有两种. 3.1.1 使用Vue.fil ...

随机推荐

  1. [转]linux下lame的使用

    找到這篇好文章,不得不说開源的Lame功能很強大 linux下lame的使用 % lame [参数] <输入文件名> [<输出文件名>] 如需查询更多参数,可输入下列命令: % ...

  2. kafka学习之-server.properties详细说明

    http://blog.csdn.net/lizhitao/article/details/25667831  -- 参考文章 http://kafka.apache.org/documentatio ...

  3. 提供json格式数据,去掉引号的方法

    java文件中 String jsondata = json.toString();InputStream inputStream = new StringBufferInputStream(json ...

  4. MongoDB的php可视化管理工具

    使用MongoDB命令查看很不方便 于是想把爬来的数据导出来,看爬来的数据是否正确 打开cmd,执行 mongoexport -d test -c blogs --csv -f title,link, ...

  5. ABBYY FineReader操作技巧

    使用ABBYY FineReader OCR文字识别软件工作即快速又简单,软件自身常常可以自行处理一切工作,用户只需点击几下软件中的‘主要’按钮.不过,有时要想获得更好的质量结果,或者解决某个不寻常的 ...

  6. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  7. go interface介绍

    http://legendtkl.com/2017/06/12/understanding-golang-interface/      深入理解 Go Interface http://legend ...

  8. AngularJS------Error: Cannot find module '@angular-devkit/core'

    如图: 解决方法: 进入项目目录下执行以下代码 npm i --save-dev @angular-devkit/core

  9. matlab矩阵内存预分配

    matlab矩阵内存预分配就意味着,划定一个固定的内存块,各数据可直接按"行.列指数"存放到对应的元素中.若矩阵中不预配置内存.则随着"行.列指数"的变大.MA ...

  10. MongoDB入门知识

    基本概念 MongoDB是一个面向文档的数据库,不是关系型数据库.MongoDB是无模式的,也就是说文档的键不需要事先定义,也不会是一成不变. 跟关系数据库相比,MongoDB中出现了一些新的定义: ...