AS3eventflow事件冒泡机制

=思路大纲=

1. ActionScript 2的问题
2. AS3解决问题
3. 结合问题，说明“冒泡”
4. 冒泡的问题所在以及解决方法

1 - ActionScript 2的问题

stage里有一个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的动作！！！！
解释: 因为btn处于mc内部，mc被加上了事件以后，按照as2的事件机制，mc内部的btn甚至是其他的元件都不能接受事件。或者可以认为mc的事件覆盖了mc中其他元件的事件。
从非冒泡机制来说，在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的冒泡机制在提供支持。

3 - 结合问题，说明冒泡机制：
Help中有一个冒泡机制的图，相信大家都已经看过了
这里我联系实例，另外做一个图，帮助各位理解。

 

上图为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 btnfucntion(event:MouseEvent) {
        trace("btn click");
        event.stopPropagation();//修改在此处。简单一句，解决问题
}

现在可以试试，点击btn运行得到的结果就是

代码:

说明，已经防止了冒泡阶段中对mc侦听函数的处理。也就没有trace(“mc click”)了
As3事件机制远远不像这里写的那么简单，还有很多东西需要研究。

总结：as2的事件分发机制是 从上根容器一直往下找 找到了可以响应事件的容器就停止 然后触发事件响应。

  as3分为两个过程  先从上根容器一直往下找 找到最底层的控件，然后依次向上触发事件