Flash-Bubble冒泡机制

1102/091

Flash-Bubble冒泡机制

AS2中没有冒泡机制，所以我们有时候会碰到Demo中的问题：
(Demo说明，btn为mc内的一个MovieClip)

该Demo的代码：

mc.onRollOver = function() {
	txt.text += "mc.onRollOver--------";
};
mc.onRollOut = function() {
	txt.text += "mc.onRollOut--------";
};
mc.btn.onRelease = function() {
	txt.text += "mc.btn.onRollOver--------";
};

在Demo中可以发现，当mc本身有鼠标事件(例如onRollOver)，那么置于其内的全部子元件事件都会失效，这一切的原因就是AS2里边没有冒泡机制，在点击btn的时候，执行了mc的CLICK事件之后就不再执行btn的CLICK事件了。
关于冒泡机制的详细说明可以参考Flash自带的说明文档。

这个问题在AS3里得到了彻底的解决，这一切都归功于冒泡机制。
先看Demo，结构跟上边那个一样，多出来的btn的name=btn2。

从Demo可以看出来虽然mc有了鼠标事件，但是btn的事件依然可以触发，不过在点击btn后，先是触发btn的CLICK事件，然后在向上冒泡的过程中触发mc的的CLICK事件，如果我们需要终止冒泡过程，可以使用stopPropagation()方法。
Demo中左边btn2的CLICK事件里就是用了这个方法来终止冒泡过程。
代码如下：

mc.addEventListener (MouseEvent.CLICK,mcCLK);
mc.addEventListener (MouseEvent.MOUSE_OVER,mcOver);
mc.addEventListener (MouseEvent.MOUSE_OUT,mcOut);
mc.btn.addEventListener (MouseEvent.CLICK,mcbtnCLK);
mc.btn2.addEventListener (MouseEvent.CLICK,mcbtn2CLK);
function mcCLK(_evt:MouseEvent) {
	txt.appendText ("mc.CLICK---------");
}
function mcOver (_evt:MouseEvent) {
	txt.appendText ("mc.MOUSE_OVER---------");
}
function mcOut (_evt:MouseEvent) {
	txt.appendText ("mc.MOUSE_OUT----------");
}
function mcbtnCLK (_evt:MouseEvent) {
	txt.appendText ("mc.btn.CLICK----------");
}
function mcbtn2CLK (_evt:MouseEvent) {
	txt.appendText ("mc.btn.CLICK----------");
	_evt.stopPropagation();//终止冒泡过程
}