AS3 event stopImmediatePropagation() stopPropagation()用法以及区别

<span style="font-family: verdana, 'courier new'; font-size: 14.7px; background-color: rgb(255, 255, 255);">转载如下：</span>

版权声明 ：转载时请以超链接形式标明文章原始出处和作者信息及 本声明  http://goday.blogbus.com/logs/14062836.html

今天，我也正式宣布，开始成为闪客，以往对macromedia flash的许多头疼问题都被adobe解决了，以往一直否认我喜欢做flash，现在总算可以为adobe flash 自豪。非常有系统的developing方式。RIA 平台, on screen project就不这里说了。

这期带来的是flash极重要元素之一，event事件。在游戏里就是所谓的Trigger. Adobe改良后的，大家谓称的“冒泡机制”。有问题欢迎发问指教。

=思路大纲=

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运行得到的结果就是

代码:

btn click

说明，已经防止了冒泡阶段中对mc侦听函数的处理。也就没有trace(“mc click”)了

接下来再追究一下这两者的区别：

 

stopImmediatePropagation 防止对事件流中当前节点中和

所有后续节点中的事件侦听器进行处理。此方法会立即生效，并且会影响当前节点中的事件侦听器。

 

stopPropagation  防止对事件流中当前节点的后续节点中的所有事件侦听器进行处理。此方法不会影响当前节点 (currentTarget) 中的任何事件侦听器。

测试代码如下：

public class Main extends Sprite {
		private var _container:Sprite;
		private var _btn:Button;
		public function Main() {
			if (this.stage){
				this.addEventListener(Event.ADDED_TO_STAGE, init);
			}else{
				init();
			}
		}
		
		public function init(e:Event=null):void{
			this.removeEventListener(Event.REMOVED_FROM_STAGE, init);
			
			_container = new Sprite();
			_container.graphics.beginFill(0x000000, 1);
			_container.graphics.drawCircle(20, 20, 100);
			_container.graphics.endFill();
			this.addChild(_container);
			_container.x = 100;
			_container.y = 100;
			
			_btn = new Button(60, 30, '按钮',0xff2300);
			_container.addChild(_btn);
			
			this._btn.addEventListener(MouseEvent.CLICK, onClickBtn);
			this._btn.addEventListener(MouseEvent.CLICK, onClickBtn2);
			this._btn.addEventListener(MouseEvent.CLICK, onClickBtn3);
			this._container.addEventListener(MouseEvent.CLICK, onClickContainer);
			this.addEventListener(MouseEvent.CLICK, onClickStage);
		}
		
		private function onClickBtn(evt:MouseEvent):void{
			evt.stopPropagation();
			trace("click Button");
		}
		
		private function onClickBtn2(evt:MouseEvent):void{
			evt.stopImmediatePropagation();
			trace("click Button 2");
		}
		
		private function onClickBtn3(evt:MouseEvent):void{
			trace("click Button 3");
		}
		
		private function onClickContainer(evt:MouseEvent):void{
			trace("click Container");
		}
		
		private function onClickStage(evt:MouseEvent):void{
			trace("click stage");
		}
		
	}

编译之后的结果是：

click Button
click Button 2

说明了同一个目标处理同一个事件的时候，该事件也有可能是内部ui控件冒泡上来的，所以stopImmediatePropagation()方法是可以阻止冒泡之后所有的事件。而stopPropagation()方法是可以阻止非该目标触发的事件（即冒泡阶段捕获该事件）对象去处理该事件。