参考:

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. PowerDesigner使用技巧(转载)

    1.如何打开PowerDesigner 快捷工具栏 paletteTools(工具栏)--> customsize toolbars(自定义工具栏)-->勾选 palette(调色板) 2 ...

  2. text/html和text/plain的区别

    1.text/html的意思是将文件的content-type设置为text/html的形式,浏览器在获取到这种文件时会自动调用html的解析器对文件进行相应的处理. 2.text/plain的意思是 ...

  3. ZooKeeper ACL权限设置

    ZK的节点有5种操作权限:CREATE.READ.WRITE.DELETE.ADMIN 也就是 增.删.改.查.管理权限,这5种权限简写为crwda(即:每个单词的首字符缩写)注:这5种权限中,del ...

  4. org.apache.http.client.methods.HttpGet 转到定义找不到源代码

    例如 org.apache.http.client.methods.HttpGet ,提示没有源码 到这里下载 http://hc.apache.org/downloads.cgi Source 4. ...

  5. GetLastError结果列表

    程序执行出现错误,使用GetLastError可以初步得到错误的大致原因,方便程序员来分析,错误码对应含义总结如下,方便查看! MSDN System Error Codes: https://doc ...

  6. 实现一个div,左边固定div宽度200px,右边div自适应

    实现一个div,左边固定div宽度200px,右边div自适应<div class= "container"> <div class="left&quo ...

  7. Linux下安装或升级Python 2.7

    1.准备编译环境gcc 2.去官网下载要安装的对应版本的python的源代码 下载地址:https://www.python.org/downloads/source/ 你可以选择你要下载的版本,用w ...

  8. 安装程序配置服务器失败。参考服务器错误日志和C:\windows\sqlstp.log 了解更多信息

    重装sql经常遇到2个问题 1,以前的某个程序安装已在安装计算机上创建挂起的文件操作.运行安装程序之前必须重新启动计算机. 删除C:\Program Files\Microsoft SQL Serve ...

  9. android:versionCode和android:versionName 用途(转)

    转自:http://blog.csdn.net/wh_19910525/article/details/8660416 Android的版本可以在androidmainfest.xml中定义,主要有a ...

  10. 1、一、Introduction(入门): 0、Introduction to Android(引进到Android)

    一.Introduction(入门) 0.Introduction to Android(引进到Android) Android provides a rich application framewo ...