博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
as3事件流机制彻底理解
阅读量:4429 次
发布时间:2019-06-07

本文共 1634 字,大约阅读时间需要 5 分钟。

as3的事件流分三个阶段:捕获阶段、目标阶段、冒泡阶段。如果记不住这三个阶段的顺序,想象以下捕鱼的过程,捕鱼也分三个阶段:撒网、捕捉,捞起,三个阶段从上向下。

 
为什么要事件流要分三个阶段呢?
 
这一切都是因为“显示列表”,没有显示列表,也就不会有事件流。在显示列表中,假设,s:舞台;c:容器;b:按钮。
 
点击按钮b,b应该发出click事件,这没错。从常识上来说,点击了b,也就间接点击了c吧,因为c包含b,那么c也应该发出click事件,同理s也应该发出click事件。问题就来了,s、c、b发出click事件的顺序该如何处理?
 
用盒子模型来理解,要想“摸东西”,肯定要从最外层的盒子开始摸起,层层向内摸,所以事件流的第一阶段是捕获阶段,由外至内。接着就是目标阶段。摸完东西,手就要缩回来,缩回来的过程就是冒泡阶段。
 
捕获阶段和目标阶段我们很容易理解,从外向内依次发出事件,那为什么还要有冒泡阶段呢?冒泡阶段是为了满足用户灵活处理事件的需求而产生的。只有捕获和目标阶段,那么用户就必须先处理s的click事件,然后是c的click事件,最后才是b。但好多时候,用户是想先处理b的click事件,然后才是c,最后是s,冒泡阶段由此而生。
 
addEventListener(type:String, listener:Function, useCapture:Boolean= false, priority:int= 0, useWeakReference:Boolean= false):void
用addEventListener监听事件,默认是目标阶段或者冒泡阶段,只有useCapture=true的时候,才是捕获阶段。b只有目标阶段,s和c有捕获和冒泡两个阶段。
 
function onClick(e:MouseEvent):void
{
    trace(e.target);
    trace(e.currentTarget);
}
 
b.addEventListener(MouseEvent.CLICK, onClick,  false); //e.target == e.currentTarget == b
b.addEventListener(MouseEvent.CLICK, onClick,  true); //不会有任何效果。
 
c.addEventListener(MouseEvent.CLICK, onClick,  false); //e.target ==  b,e.currentTarget == c
c.addEventListener(MouseEvent.CLICK, onClick,  true); //e.target ==  b,e.currentTarget == c
 
s.addEventListener(MouseEvent.CLICK, onClick,  false); //e.target ==  b,e.currentTarget == s
s.addEventListener(MouseEvent.CLICK, onClick,  true); //e.target ==  b,e.currentTarget == s
 
注意,假如b.mouseChildren=false; b.mouseEnabled=false;那么以上所有的事件都没有效果了,因为没有事件的生产者了。你会问,c不能生产事件吗?不能,因为c是空白的,不能被点击。假如b不是按钮,而是shape或者图片,那么c就能产生事件了。因此,InteractiveObject是通过事件流使父容器发出事件的,非InteractiveObject是通过填充父容器,而使其直接发出事件。
 
 
记住,事件流因显示列表而生,像捕鱼一样有三个阶段:捕获、目标、冒泡。

转载于:https://www.cnblogs.com/huangxiaoyi/p/4447401.html

你可能感兴趣的文章
Ffmpeg 定位文件(seek file)
查看>>
数据结构与算法随学随记
查看>>
微软Azure已开始支持hadoop--大数据云计算
查看>>
统计_statistics_不同的人_大样本_分析_统计方法_useful ?
查看>>
wampserver 绑定域名 外部可以正常访问
查看>>
将博客搬至CSDN
查看>>
sqoop/1.4.6/下载
查看>>
https协议及与http协议的比较
查看>>
mongodb数据备份与恢复
查看>>
ubuntu安装(owncloud-docker安装)
查看>>
(十一)tina | openwrt关闭调试串口(DEBUG UART)
查看>>
Android中获取TextView行数
查看>>
AngularJS 学习笔记值post传值
查看>>
maven+springMVC+mybatis+junit详细搭建过程
查看>>
iframe详细用法
查看>>
angularjs 使用angular-sortable-view实现拖拽效果(包括拖动完成后的方法使用)
查看>>
2015生命之旅---南京、南通、上海之行
查看>>
高精度练习之乘法(codevs_3117)
查看>>
小Z爱划水
查看>>
javascript中click和onclick的区别
查看>>