参考:

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. ML基础 : 训练集,验证集,测试集关系及划分 Relation and Devision among training set, validation set and testing set

    首先三个概念存在于 有监督学习的范畴 Training set: A set of examples used for learning, which is to fit the parameters ...

  2. jenkins 升级jdk到1.8.0 报java.io.IOException:Unable to read /var/lib/jenkins/config.xml

    今天手动下载安装了jdk1.8.0, 并修改了配置文件,当前默认使用该版本的jdk.但是报出一下错误: 问题查到: https://issues.jenkins-ci.org/browse/JENKI ...

  3. node.js和socket.io实现im

    im——Instant Messaging 即时通讯 基本技术原理 (1)通过IM服务器登陆或注销 (2)用户A通过列表找到B,用户B获得消息并与之交谈 (3)通过IM服务器指引建立与B单独的通讯通道 ...

  4. 简单了解一下什么是Django或者说Django是做什么的?

    Django是什么? Django是一个基于Python的Web应用框架.它与Python的另外一个Web 框架 Flask最大的区别是,它奉行 “包含一切” 的哲学.该理念即为:创建 Web 应用所 ...

  5. 配置ORACLE 11g绿色版客户端和PLSQL远程连接环境

    配置ORACLE 11g绿色版客户端和PLSQL环境   本方法是通过使用ORACLE官方提供的精简版客户端,即绿色免安装的客户端.   Instant client的版本很多:主要是Basic和Ba ...

  6. ASP.NET 动态创建文本框 TextBox (add TextBox to page dynamically)

    下面的函数每执行一次就生成一个TextBox(其实是<input type="Text">)    var i=0;     function changeIt()   ...

  7. IE8兼容性调试及IE 8 css hack

    做网站开发,一提到IE,就会让人头大,有一肚子的牢骚要发:微软为什么不跟着国际标准走呢,总是独树一帜,搞出那么多问题来.IE的firebug调试工具也不太好用,尤其是低版本的IE,更是让人头疼. 最近 ...

  8. 使用pull方式解析xml文件示例:

    网上的示例太多,基本类似,个人在此做个简单的总结: 1.首先在工程的asserts目录下建一个book.xml文件: <?xml version="1.0" encoding ...

  9. Linux最大打开文件描述符数

    1.    系统最大打开文件描述符数:/proc/sys/fs/file-max a.    查看 $ cat /proc/sys/fs/file-max 186405 2. 设置 a.    临时性 ...

  10. fork(), waitpid()

    NAME fork - create a child process SYNOPSIS #include <unistd.h> pid_t fork(void); RETURN VALUE ...