AS3的冒泡机制
Author: 柳世杀神·GabrielGon18 一 2008
再述冒泡思路1 在as2中发现问题,2 在as3中解决问题。3 结合问题,说明冒泡4 冒泡的问题所在以及解决方法冒泡很多人在谈,前段时间小弟也是一知半解。弄得云里雾里的。最近找到一个pdf,呵呵,才算弄明白了点。把一点学习笔记发出来。1 在as2中发现问题,我们用一个例子来发现as2中究竟有什么问题。As2中实现如下效果:舞台上一个mc,mc中一个btn点选mc实现拖动mc,鼠标松开停止拖动点选mc实现mc隐藏。最容易想到的方法,代码如下: 代码:mc.onPress = function() { this.startDrag();};mc.onRelease = function() { this.stopDrag();};mc.btn.onPress = function() { mc._visible=false};表面来看,这个思路是正确的。(实际上没什么思路可言,很简单的方法。)实际怎么样?当然是不能实现。问题来了:点击btn,不能触发btn的动作!!!!解释如下:1 因为btn处于mc内部,mc被加上了事件以后,按照as2的事件机制,mc内部的btn甚至是其他的元件都不能接受事件。或者可以认为mc的事件覆盖了mc中其他元件的事件。2 从非冒泡机制来说(as2就是非冒泡),在btn上点击鼠标,首先接受到点击事件的自然是btn的上一层(也就是mc),然后才是btn元件。Mc先接受到点击事件,触发相关的函数。然后呢?我们要实现的点击btn的效果没了。我们可以认为mc把我们的鼠标点击事件据为私有了,不再往下传递。(如果是冒泡机制的话,这个动作就回继续往下传递到btn,然后btn会执行。)那么这种效果在as2中还能实现么?答案自然是肯定的,不过方法就复杂了。这里就不讨论了。As3已经成为主流。但是as3中的冒泡机制,让我们可以简单的解决这样的难题。2 在as3中解决问题:下面来看as3中怎么实现。代码如下: 代码:import flash.events.*;mc.addEventListener(MouseEvent.CLICK,mcfunction);mc.btn.addEventListener(MouseEvent.CLICK,btnfucntion);function mcfunction(event:MouseEvent) { trace("mc click");}function btnfucntion(event:MouseEvent) { trace("btn click");}能实现了吧?看看代码就觉得,好像没用什么特别的解决方法,就加两个侦听函数,就搞定了。这个代码自然的不能再自然了,就好像做flash 先的安装软件一样。但是如此自然的代码下面,使as3的冒泡机制在提供支持。 结合问题,说明冒泡机制:Chm中有一个冒泡机制的图,相信大家都已经看过了这里我联系实例,另外做一个图,帮助各位理解。 上图为as2中的执行原理下图为as3中的执行原理 上图也就是在as3中实现我们文章开始提出的例子的工作原理。下面详细描述一下捕获阶段:鼠标在btn上发出点击事件,首先捕捉到该事件的事stage.,然后事件往下传递到mc,再到btn..(如果鼠标事件发生在btn按钮中的一个label上,那么该事件还会继续向下传递,直到找到label元件。) As2中,一旦找到了可以相应事件的函数,就停止了,不会往下传递。这个道理应该说明白了目标阶段:找到我们的鼠标最底层的目标,也就是btn以后,那么就开始执行btn的侦听函数了。 如果鼠标事件发生的所在位置,是mc中的btn中的一个label。那么将先执行label的侦听函数。(当然我们的例子中没有label)冒泡阶段:执行了目标阶段的侦听函数以后,开始冒泡。换一个说法是,返回btn的父级元件mc,如果能找到相关的侦听函数,那么就执行,如果没有,就继续往上冒泡到btn的父级元件mc的父级元件stage。看能不能找到相关的侦听函数。注意一个:首先执行的函数一定是目标对象的侦听函数。就像我们上面的例子一样,点击btn会先trace(“btn click”),然后冒泡到mc,执行trace(“mc click”)..然后继续往上,如果stage我们也加一个侦听函数,执行语句,那么还会继续执行 trace(“stage click”).到达stage顶层了,冒泡结束。说到这里,各位看官也应该明白了as3的冒泡究竟是干什么用的了4 冒泡的问题所在以及解决方法 冒泡也有问题,并不是说它有缺陷,因为出现问题无法避免。 问题在于, 假如在上面的例子中,我们不想在点击btn冒泡阶段中执行mc的侦听函数,我们只想执行btn的侦听函数。怎么解决?同样的问题延伸出去,可以得到很多扩展和应用。那么我们需要阻止他的冒泡的时候执行相关的侦听函数。Chm中的方法有 stopImmediatePropagation():void防止对事件流中当前节点中和所有后续节点中的事件侦听器进行处理。stopPropagation():void防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。用来修改我们上面的例子代码如下: 代码:import flash.events.*;mc.addEventListener(MouseEvent.CLICK,mcfunction);mc.btn.addEventListener(MouseEvent.CLICK,btnfucntion);function mcfunction(event:MouseEvent) { trace("mc click");}function …
- No Comments , 11 次阅读 Hits
-
标签:ActionScript, 冒泡
学习计划
Author: 柳世杀神·GabrielGon17 一 2008
既然开始了,还是有个计划的好,也算给自己的一个约束·ActionScript3&Flex完全精通,时限3个月·AIR高级应用,时限1个月·FMS2/3高级应用,时限1个月·Asp.NET&SQL/mySQL高级应用,时限3个月·Ajax技术的综合运用,时限2个月·PHP中级应用,时限1个月期间以FLASH/FLEX为主轴进行延伸另外的目标:省钱,拼命省钱并赚钱,拼命赚钱
- No Comments , 8 次阅读 Hits
-
标签:学习计划
《ActionScript 3.0 making things move》
Author: 柳世杀神·GabrielGon16 一 2008
看了一下keith peters的ActionScript 3.0 making things move样张,实在令人佩服与惊叹果然这些东西还是老外写的好啊!怎么说呢?更加符合“人脑工程学”,呃~是,你很可能没听过这个词。我是说-很符合思维导图的模式,嗯……再简洁一点,就是:你在看某个例子,碰到疑惑,正想了解这个疑惑的时候,下一行这个疑惑的解答就出来了,而且还非常详细与容易理解只是还没出版,等,出了之后一定备一本在身边[给自己的P.S:多看一下样张,重复看几次。虽然翻译的不怎么样,不过自己结合一下自己所理解的语法多看几次,总会有新的发现与概念上的突破]
- No Comments , 11 次阅读 Hits
-
标签:ActionScript, ActionScript 3.0 making things move
关于AS3的初始化顺序(设置了Document Class之后)
Author: 柳世杀神·GabrielGon16 一 2008
Document Class初始化 > 主时间轴代码执行 > 舞台元件绑定的类初始化 > 元件的时间轴代码初始化 >.. 下面的层次按这样的规律循环。
- No Comments , 121 次阅读 Hits
-
标签:ActionScript3, 初始化
FLASH 10 IDE
Author: 柳世杀神·GabrielGon15 一 2008
呃~是有些老了,不过还是补发一个…… Flash Player 10 (Astro) 新功能大家都看到了,今天来看看 Flash 10 IDE 方面的: 1,直接通过舞台可视化的编辑控制视频,无需反复编译测试. 2,内建 3D 和高级滤镜工具 3,类似 AE 的时间轴管理和动画制作方式 4,IK 骨骼系统支持,这对人物动画制作帮助可不小.
- No Comments , 16 次阅读 Hits
-
标签:FLASH CS4, FLASH10
Flex中嵌入字体
Author: 柳世杀神·GabrielGon14 一 2008
使用以下的形式就可以将你本地电脑上的字体嵌入到Flex中注意:在嵌入字体的同时会相应的增大Flex文件的大小 @font-face { src: local("Arial"); fontFamily: ArialEmbedded; fontWeight: normal;} @font-face { src: local("Arial"); fontFamily: ArialEmbedded; fontWeight: bold;} Application { font-family: ArialEmbedded;}
- No Comments , 190 次阅读 Hits
-
标签:FLEX, 字体
Flex学习笔记六
Author: 柳世杀神·GabrielGon14 一 2008
1、parentApplication 组件的parentApplication属性包含此组件的Application对象,Application对象本身的parentApplication为null。当Flex程序生成的SWF文件被其他的Flex程序加载时,被加载的Flex程序中组件的parentApplication属性保持不变,这种情况下,parentApplication属性有可能代表主程序 组建还有两个相关属性:parent属性,指包含组件的父级对象;parentDocument属性,指组件所在的Application程序或用户组中位于层级顶部的对象。parentDocument和parent属性很容易混淆,它们有时会指向同一对象。比如在自定义一个继承Canvas的组件,叫cartCell,其中放入一个id为cart_check的CheckBox,那么这个cart_check的parent属性和parentDocument属性总代表cartCall组件本身。如果在cartCell中再创建一个名为check_holder的Canvas,将cart_check放在check_holder里面,这样cartCell中就形成了两级容器。此时cart_check的parent指向check_holder,而parentDocument仍然指向cartCell组件不变。2、关于dispatchEvent 他是Flex事件机制中的一个核心方法,用来派发事件: this.parentApplication.dispatchevent(new cartEvent(data,cart_check.selected)); 这句代码的作用是,this.parentApplication对象(也就是Application本身),将新创建的cartEvent对象派发出去。新建的cartEvent对象还包含了两个属性,存放的必要的信息。当有对象侦听这个事件时,就可以获得这些信息3、熟练super()的使用环境 BTW:这时候的网速真快啊……
- No Comments , 97 次阅读 Hits
-
标签:ActionScript3, FLEX, 学习笔记
武汉下雪了啊……
Author: 柳世杀神·GabrielGon13 一 2008
先还不知道,以为是下雨呢……然后……然后,打电话的时候,从别人口中知道了……然后然后……出去买夜宵,发现不仅下了,而且还下的好大……嗯……今天夜宵竟然吃完了,难道真的是天气冷了,生物的本能是要消耗卡路里吗……啊……懒洋洋……懒洋洋……
- No Comments , 8 次阅读 Hits
-
标签:武汉, 雪
电子诗人:理科生的幽默
Author: 柳世杀神·GabrielGon13 一 2008

著名科幻小说家刘慈欣写的一个小软件,可以自动写诗。你只需要设定几个简单的参数,然后点击“开始创作”就行了。大刘说:电子诗人最大的优势还在于速度,据最新测定,其产诗量为200行/秒(不押韵)或150行/秒(押韵)。产诗方式绝对全自动,除了告知行数外,不需人的任何干予。而且该诗人以其数学人格保证,以RAND()函数保证,无论写多少行诗,绝无一行重复!无聊的时候让电子诗人创作几首诗给你瞧瞧,看看理科生的幽默。“只要人类仍然在自毁,人类就还是有线条美的”,普通诗人能写出这样的句子吗?P.S.其实我是磁铁。BTW:Technorati Profile点击下载 | 来自网生代 | 刘慈欣的博客附上一首它写的诗…三峡在淡化大坝被磁化吧升华吧氧化吧自杀吧,狡滑的程序代码!酒吧,筹码,金字塔!仲夏被磨擦得被磁化摩天大厦,请升华吧!让伏特加垂死挣扎吧!在高楼大厦旁,大厦在挥发无限大,在火把上出现……我在淡化摩天大厦在刮《蒙娜丽莎》在刺杀美食家在润滑仲夏还在大骂恶之花你无限大得象酒吧晚霞在刮朝霞磨擦吧磁化吧升华吧说梦话吧,进化的骨架!白桦,伏特加,沙发!大厦被挣扎得挥发盔甲,请蒸发吧!让雅典娜自杀吧!在青蛙旁,多伦多塔在升华庞大,在灯塔上出现……我在溶化绞架在轰炸遗传密码在喝下雪花在谋杀古画还在磁化舞蹈家你低下得象密码撒哈拉在攻打沙发叽叽喳喳吧挥发吧撕杀吧互相残杀吧,进化的幼芽!花,十字架,夏娃!古画被挥发得谈话晚霞,请垂死挣扎吧!让高楼大厦挣扎吧!在遗传密码旁,野花在撕杀想自杀,在骨架上出现……我在溶化舞蹈家在淡化天马在磨擦酒吧在攻打伏特加还在淡化绞架你庞大得象荷花酒吧在刮野花倒下吧挣扎吧自杀吧自杀吧,无穷大的大陆架!钢琴家,朝霞,尾巴!高楼大厦被倒下得自杀大坝,请叽叽喳喳吧!让野花蒸发吧!在龙虾旁,撒哈拉在谈话大大,在布娃娃上出现……我在溶化群马在锤打灰鲨在暗杀色拉在大骂大厦还在暗杀风沙你博大得象碉刻家指甲在攻打火把挣扎吧挣扎吧挥发吧倒下吧,广大的菊花!幼芽,白桦,灯塔!舞蹈家被磁化得谈话高楼大厦,请挣扎吧!让幼芽自杀吧!在仲夏旁,灰鲨在叽叽喳喳宽大,在青蛙上出现……我在喝下《蒙娜丽莎》在刺杀大陆架在刮科学家在溶化青蛙还在磁化放牛娃你进化得象骨架BTW:这诗……真电脑啊……不愧是理科生的幽默……
- No Comments , 14 次阅读 Hits
-
标签:理科生的幽默, 诗
Flex学习笔记五&关于FDT的和Eclipse的一点牢骚
Author: 柳世杀神·GabrielGon12 一 2008
1、ComboBox,重点理解DropdownEvent事件。在列表被弹出或收回时,会分别派发DropdownEvent对象的OPEN事件和CLOSE事件。对这两个时间进行监听,便可捕捉用户的动作。2、注意,与之外的都是一个整体,而不是分开的3、发现还有很多人不明白这个void为什么要加。这里说明一下:是为了方便不带参的function除错(debug)。例如: function testVoid():void{ trace("testVoid") } 然后我testVoid(1),运行这时候程序就会出错。 函数参数为void的意思是这个函数不接受任何参数。所以,养成好习惯,只要不传参的function等,都加上void声明吧4、Alert的show是一个静态方法,格式如下: show(text,title,flags,parent,closeHandle,iconClass,defaultButtonFlag)5、关于evt:CloseEvent,CloseEvent之后的值是在evt.detail6、关于itemRender,实在不明白概念的,就理解为“界面/组件绑定”吧……是,这样对真正的意思有些偏移,不过若实在对itemRender的概念混淆,也只能暂时在全部顿悟之前,先这样理解吧。这里也说说真正的意思: 用来控制数据表现形式的机制我们称之为“itemRender”。用户可以定义自己的itemRenderer对象,来覆盖某些有itemRenderer对象的组件的默认属性。自定义的itemRenderer相当于一个简单的自定义组件。同样,里面可以放置其他控件来表现更加丰富的内容。 顺便一说,这个东西相当使用,可以用来实现很多有趣的功能。 [2008.1.14附加] 可以作为用来作为与itemRender的组件又一个共同的特点,那就是拥有一个名为“data”的属性。 当组件被用作itemRenderer时,就拥有了data属性。data代表的是当前元素的数据信息,一般是Object类型,包括若干属性,data的数据格式和数据源的数据格式是一一对应的。 itemRenderer的data是由控件主动传入的,直接使用就可以了。 比如datagrid的数据源是books,其中每一条数据类型是book,那么itemRenderer的data也是book类型。7、关于function的函数中带事件 如internal function selectHandler(evt:CloseEvbent):void{}。意思是说将事件evt:CloseEvbent的结果带入到函数中,从而供这个function进行使用。这个和我们一直理解的function一样,只是带入的东西不同罢了 然后,这里是作者Email的解释(以bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler)为例): bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler); 这句代码的意思是添加一个事件监听器,chooseHandler是函数名。 在使用 addEventListener方式添加事件监听函数时,该函数在定义时必须定义参数类型,也就是监听的事件类型。这样,当目标发送该事件时,会把事件作为参数传递过来,如果函数没有定义参数,也就无法接受事件传递的信息。 作者EMAIL2: 在使用 addEventListener方式添加 事件监听函数时,该函数在定义时必须定义参数类型,也就是监听的事件类型。这样,当目标发送该事件时,会把事件作为参数传递过来,如果函数没有定义参数,也就无法接受事件传递的信息。 比如: btn.addEventListener(MouseEvent.CLICK,doClick); 那么,doClick函数在定义时,就必须是:doClick(event:MouseEvent),这个参数的名字可以随便定义,但类型必须是 MouseEvent或者MouseEvent类的父类。 事件类型的工作机制是这样的: 1、注册事件监听器,把监听对象和监听函数记录下来,也就是把btn和doClick记录下来。 2、当事件发生时,程序开始检查是否有对象进行了监听,如果有,这些监听函数就会被调用,调用的形式就像:obj.doClick(event),其中obj表示添加了监听器的对象btn,也就是执行了 addEventListener的对象,参数event表示事件对象。因此,doClick函数必须定义准确的参数,参数类型必须是event的类型或其父类类型,否则,变量类型不对,将引发运行错误。 如果一下子还是无法理解过来,那么就记住这点:addEventListener的是什么事件,那么在这个事件触发的自定义函数中,就要定义这个addEventListener监听的事件的事件类型。 例子: exp1: bookList.addEventListener(DropdownEvent.CLOSE,chooseHandler); internal function chooseHandler(evt:DropdownEvent):void{} exp2: btn.addEventListener(MouseEvent.CLICK,doClick); internal function chooseHandler(evt:MouseEvent):void{} 然后就可以通过evt来调用监听事件的参数和值了。如 internal function closeHandler(evt:CloseEvent):void{ if(evt.detail==Alert.YES){ viewLabel.text="选择的是:yes" }else{ viewLabel.text="选择的是:No" } 可能有些朋友已经注意到了为什么后面带入的evt中没有具体的事件名?而仅仅是类的成员名?是这样,我们以MouseEvent来说 导入的MouseEvent对象包含了所有的鼠标事件,如单击、双击、鼠标按下、鼠标松开、鼠标移动等等,这些事件名被封装成MouseEvent类的成员属性。在使用时,我们直接引用类成员名,而不需知道真正的事件名。嗯,最后,记住今天所说的:数组,push吧!BWT:FDT你是个球,你是个大球,下了几百次都下不下来
- No Comments , 209 次阅读 Hits
-
标签:AS3, FLEX, 学习笔记

最活跃用户