深入理解Flex的事件机制

文章出处:http://www.cnblogs.com/yuxuanji/articles/2126275.html


本文仅供FLEX爱好者互相交流学习之用,鄙人水平有限,写的不对的地方敬请指正。

为了统一dispatch的中文叫法,下文一律称为派发。(js中一般叫触发事件,而flex中叫派发事件)

1.  AS3中的事件为什么要分三个阶段,即捕获、目标、冒泡。

这要从FLEX使用的脚本语言ActionScript3的老大哥Javascript说起,熟悉Javascript的朋友都知道在DOM中完整的事件生命周期包括捕获、目标与冒泡三个阶段。
事件的处理过程将从事件目标所在DOM层次的根节点开始,而不是从派发事件的目标开始,并且最终会回到根节点。

捕获阶段:事件从目标所在DOM树的根节点依次往下层传递,一直到目标节点之前的过程。在这个过程中,事件将会被从根节点到事件目标之前的所有父节点对象所捕获。如果事件在被注册时设置了useCapture属性为true,那么它会被这期间的所有注册了该事件的父元素对象依次派发。

目标阶段:事件到达目标元素。目标元素如果注册了该事件并且设置了useCapture属性为false,则目标会派发该事件。

冒泡阶段:事件到达目标元素后会接着通过DOM节点向上层父节点冒泡,并最终回到目标所在DOM树的根节点的过程。在这个过程中如果事件是可冒泡事件(最典型的例子就是click事件)并且在被注册时设置了useCapture属性为false,那么它会被这期间的所有注册了该事件的父元素对象派发。

AS3也采用这套机制。上图就是Adobe官方文档中的插图。真个AS3事件的生命周期与DOM对象上JS事件的生命周期完全相同。
我认为这套机制这样最大的好处就是可以减少了同一个UI树上对象监听器数量,从而带来性能优化。

举个简单而常见的例子:
canvas上有n个button,如果给每个button注册一个click事件,那么内存中就需要维护n个listener。由于click事件是可冒泡事件,那么更好的解决办法就是给canvas注册一个click事件,即

?
canvas.addEventListener(MouseEvent.CLICK,onMouseClickHandler);

调通过事件的冒泡阶段由n个button共同的父元素canvas来派发click事件,并且可以通过事件参数的target属性来决定调用哪个button对应的处理函数。这样做的的好处就可以只注册一个事件监听从而代替为n个button注册n个事件。

2.target和currentTarget究竟谁是事件的派发者?

target:事件指向的目标,但并非事件的派发者。 在一个事件整个生命周期中所有被派发的事件处理函数内部的target对象是一样的,每个被监听者派发的事件处理函数中的target一定都是同一个对象。
currentTarget:事件的派发者。调用注册在事件上的回调函数的那个对象,简单的说就是派发事件的对象。

3.useCapture到底有何用?

首先看看AS3中为IEventDispatcher类型对象注册事件监听的接口(完全符合W3C标准)

?
addEventListener(type:String,listener:Function,useCapture:Boolean = false ,priority:int = 0,useWeakReference:Boolean = ):void

最显而易见的用处,如果没有这个参数,那么走完事件的生命周期,所有目标父节点上注册的事件都会被执行两次(捕获阶段一次+冒泡阶段一次)!也正因为有useCapture这个参数,整个事件机制的运作才有了分支,或者更说是被分成两个独立部分。

拿上面“n个button的例子”来说,如果用户点击某一个button将会触发click事件,首先我们来看下整个click事件的生命周期中将会经历的UI对象:

stage → canvas → button →  canvas → stage

然后我们再看分析一下事件流的三个阶段。
首先是捕获阶段:
事件从该button所处显示对象树的根出发,也就是stage,stage上未注册click事件,不会做出任何响应。
然后来到stage的子节点即canvas,注意我们在canvas上注册了click事件,而此时click事件不会被派发,因为例子中我们注册的click事件使用的是默认的useCapture=false参数,即click事件必须在目标和冒泡阶段才能被派发。
然后进入目标阶段:
尽管目标是button,但由于其并未注册任何click事件监听所以也不作出任何响应。
由于click事件是可冒泡事件,所以最后会进入冒泡阶段:
从button到canvas,canvas上注册了click事件监听,所以canvas派发该事件,进入事件处理函数,此时target是button,currentTarget是canvas。

如果useCapture=true呢?
还是“n个button的例子”,我们给canvas注册一个useCapture=true的click事件会怎么样呢即

true );

这样有三点好处:

1. 事件不会经历目标和捕获阶段,这样只有当且仅当事件的target为监听对象的子对象时,事件才会被派发。“n个button的例子”当监听器的参数useCapture=true,用户点击目标如果是canvas自己,则事件不会被派发。换言之只有点击canvas上的子对象,比如某个button或是canvas上的其他UIcomponent,click事件才会触发。再解释一遍为什么吧。点击canvas本身,事件流首先进入捕获阶段从目标(canvas)所在显示对象列表的根stage开始向下,来到canvas上,这时因为event.target==canvas,进入目标阶段,尽管canvas注册了click事件,但useCapture参数是true,那就是说事件只能在捕获阶段被派发,所以这个事件并不会被派发出来,也就是点击canvas没有任何响应。
想象一下应用场景,比如那种点击小球会得分的游戏,我们可以给小球的容器对象加上监听,但又不想在事件处理函数中接判断用户是否点到了容器本身上,这时我们大可放心的给容器对象加上useCapture=true的点击事件监听,让事件在捕获阶段就派发出来,这样就再也不用在函数中check来check去了,管它event.target是谁呢。
2. 不用考虑事件是否支持冒泡。
3. 由于少了两个阶段,必然少折腾一些传递。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


一:display:flex布局display:flex是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。Flex是FlexibleBox的缩写,意为"弹性布局",用来为盒状模型提供最大的灵
1. flex设置元素垂直居中对齐在之前的一篇文章中记载过如何垂直居中对齐,方法有很多,但是在学习了flex布局之后,垂直居中更加容易实现HTML代码:1<divclass="demo">2<divclass="inner">3<p>这是一个测试这是一个测试这是一个测试这是一个测试这是一个测试</p>4</div
移动端开发知识点pc端软件和移动端apppc端软件是什么,有哪些应用。常见的例子,比如360杀毒,photoShop,VisualStudioCode等等移动端app是什么,有哪些应用。常见的例子,比如手机微信,手机qq,手机浏览器,美颜相机等等PC端与移动端的区别第一:PC考虑的是浏览器的兼容性,移动端考
最近挺忙的,准备考试,还有其他的事,没时间研究东西,快周末了,难得学点东西,grid是之前看到的,很好奇,讲的二维的布局,看起来很方便,应该很适合移动端布局,所以今天抽时间学一学,这个当是笔记了。参考的是阮老师的博客。阮一峰:CSSGrid网格布局教程http://www.ruanyifeng.com/blog/2019/03/g
display:flex;把容器设置为弹性盒模型(设置为弹性盒模型之后,浮动,定位将不会有效果)给父元素设置的属性:(1)display:flex---把容器设置为弹性盒模型。(2)flex-direction---设置弹性盒模型主轴方向默认情况下主
我在网页上运行了一个Flex应用程序,我想使用Command←组合键在应用程序中触发某些操作.这在大多数浏览器上都很好,但在Safari上,浏览器拦截此键盘事件并导致浏览器“返回”事件.有没有办法,通过Flex或通过页面上的其他地方的JavaScript,我可以告诉Safari不要这样做?解决方法:简短的
flex布局,flex-item1<template>2<viewclass="container">3<viewclass="greentxt">4A5</view>6<viewclass="redtxt">7B8<
我应该设计一个大型多点触控屏幕的应用程序.从大到大,我的意思是新闻广播员(大约55英寸及以上).该应用程序是一个交互式地图.我的问题是:开发应用程序的技术.我的第一个想法是在AdobeFlex中制作,但是HTML5也是如此……必须有一些非常棒的Java库用于触摸交互,但是在Windows平台上
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&quo
【1】需求:  【2】解决方案:最近遇到布局上要求item两端对齐,且最后一行在列不满的情况下要求左对齐,使用flex的justify-content:space-between;实现时发现最后一行不能左对齐,而是两端对齐方式。 不是项目上想要的效果#网上查了一些资料,有两种方法可以实现效果:**1.
我有一个java套接字服务器,它在连接时将Animal对象发送到Flash客户端.对象发送方式如下:Amf3Outputamf3Output=newAmf3Output(SerializationContext.getSerializationContext());amf3Output.setOutputStream(userSocket.getOutputStream());amf3Output.writeObject(animal)
我正在开发一个Flex3.4应用程序,它通过最新版本的BlazeDS与JBoss-4.2.2服务器上运行的JavaEE后端进行交互.当我在Tomcat上从FlashBuilder4beta2运行Flex应用程序时,一切都很好,Flex应用程序能够进行所需的远程调用.但我的生产环境是在JBoss上,当我将应用程序移动到JBoss时(更
我有一个非常大的问题.我使用Flex3/Tomcat/BlazeDS/Spring编写了一个大型应用程序,在本地开发时运行良好,当我部署到公共开发环境时很好,但是当部署到我们的测试环境时经常失败.当远程处理请求花费大量时间(超过20秒)时,故障似乎最常发生.在我的开发服务器上,错误发生,但仅
弹性和布局display:flex在ie6,ie7不兼容状态,一般在pc用的比较少,在手机端所有的浏览器都是支持的控制子元素在父元素里面的位置关系display:flex是给父元素加的文档流是按照主轴排列,只要父元素加了flex,那么里面的子元素全部可以直接添加宽高主轴的方向
FLEX2.0源码分析(一)https://www.jianshu.com/p/8bc4c5f4b19fFLEX源码分析二(网络监测swizzle)https://www.jianshu.com/p/ffb95f2cbda6FLEX源码分析三(网络监测记录FLEXNetworkRecorder)https://www.jianshu.com/p/66267dc922c5FLEX源码分析四(Systemlog)https://www.jianshu.
1<!DOCTYPEhtml>2<htmllang="en">3<head>4<metacharset="UTF-8">5<title><itle>6<style>7*{8margin:0;9padding:0;10
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><metahttp-equiv="X-UA-Compatible&qu
flex:将对象作为弹性伸缩盒显示inline-flex:将对象作为内联块级弹性伸缩盒显示两者都是使子元素们弹性布局,但是如果是flex,父元素的尺寸不由子元素尺寸动态调整,不设置时默认是100%,而inline-flex则会使父元素尺寸跟随子元素们的尺寸动态调整。
<html><head><metacharset="utf-8"><metaname="viewport"content="width=device-width"><title>test<itle><stylemedia="screen">.tab-head{list-style-type:no
有没有办法使用邮政编码找到径向距离?我的任务是搜索居住在指定距离内的所有用户.我知道用户的zipcodes.例如,距离当前位置25英里的用户.我有其他搜索类别,我正在使用mysql查询.我无法解决距离问题.我的后端是在PHP中Flex的前端和前端.对我来说最好的选择就是www.zip-codes.com