概述冒泡机制思路以及遇到问题的解决方法
冒泡机制
思路
1 在Flash as2中发现问题,
2 在Flash as3中解决问题。
3 结合问题,说明冒泡
4 冒泡的问题所在以及解决方法
冒泡很多人在谈,前段时间小弟也是一知半解。弄得云里雾里的。
最近找到一个pdf,呵呵,才算弄明白了点。
把一点学习笔记发出来。
1 在Flash as2中发现问题
我们用一个例子来发现Flash as2中究竟有什么问题。
Flash as2中实现如下效果:
舞台上一个mc,mc中一个btn
点选mc实现拖动mc,鼠标松开停止拖动
点选btn实现mc隐藏。
最容易想到的方法,代码如下:
复制内容到剪贴板代码:
mc.onPress = function() {
this.startDrag();
};
mc.onRelease = function() {
this.stopDrag();
};
mc.btn.onPress = function() {
mc._visible=false
};
表面来看,这个思路是正确的。(实际上没什么思路可言,很简单的方法。)
实际怎么样?
当然是不能实现。
问题来了:
点击btn,不能触发btn的动作!!!!
解释如下:
1 因为btn处于mc内部,mc被加上了事件以后,按照Flash as2的事件机制,mc内部的btn甚至是其他的元件都不能接受事件。或者可以认为mc的事件覆盖了mc中其他元件的事件。
2 从非冒泡机制来说(Flash as2就是非冒泡),在btn上点击鼠标,首先接受到点击事件的自然是btn的上一层(也就是mc),然后才是btn元件。Mc先接受到点击事件,触发相关的函数。然后呢?我们要实现的点击btn的效果没了。我们可以认为mc把我们的鼠标点击事件据为私有了,不再往下传递。(如果是冒泡机制的话,这个动作就回继续往下传递到btn,然后btn会执行。)那么这种效果在Flash as2中还能实现么?答案自然是肯定的,不过方法就复杂了。
这里就不讨论了。Flash as3已经成为主流。
但是Flash as3中的冒泡机制,让我们可以简单的解决这样的难题。
2 在Flash as3中解决问题:
下面来看Flash 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"文件
能实现了吧?
看看代码就觉得,好像没用什么特别的解决方法,就加两个侦听函数,就搞定了。
这个代码自然的不能再自然了,就好像做flash 先的安装软件一样。
但是如此自然的代码下面,使as3的冒泡机制在提供支持。
3 结合问题,说明冒泡机制:
Chm中有一个冒泡机制的图,相信大家都已经看过了
这里我联系实例,另外做一个图,帮助各位理解。
上图为Flash as2中的执行原理
下图为Flash as3中的执行原理
上图也就是在Flash as3中实现我们文章开始提出的例子的工作原理。
下面详细描述一下
捕获阶段:
鼠标在btn上发出点击事件,首先捕捉到该事件的事stage.,然后事件往下传递到mc,再到btn..(如果鼠标事件发生在btn按钮中的一个label上,那么该事件还会继续向下传递,直到找到label元件。)
Flash 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顶层了,冒泡结束。
说到这里,各位看官也应该明白了Flash 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 btnfucntion(event:MouseEvent) {
trace("btn click");
event.stopPropagation();//修改在此处。简单一句,解决问题
}
现在可以试试,点击btn运行得到的结果就是
复制内容到剪贴板代码:
btn click
说明,已经防止了冒泡阶段中对mc侦听函数的处理。也就没有trace(“mc click”)了
Flash as3事件机制远远不像这里写的那么简单,还有很多东西需要研究。
本文只为抛砖引玉,让各位能先了解一下冒泡机制。
希望能多的朋友能提供相关的学习资料
提醒 一个
为了便于理解,
同时Flash as3和Flash as2的图片能做最直观的对比
我就没考虑Flash as3中的容器概念了
如果真的要考虑容器概念
那么上面的第二个图片就要做修改了
但是修改以后,理解上存在一定困难
所以就这样了
理解到 冒泡的本质,以后就好办了
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |