ActionScript 3的冒泡事件
November 16th, 2008
AS3的鼠標事件是有冒泡機制的。怎么叫冒泡呢？且聽我來解釋：
眾所周知AS3有顯示列表機制，鼠標事件即是跟顯示列表有密切關係，因為鼠標事件都是由顯示對象接收。不過呢，顯示列表是有層級關係的，具體關係如圖：
可以看到，最上層是“舞臺”，下面是文檔類的實例，再下面就是各個顯示對象了。所以鼠標事件就是先由Stage接收，再傳遞到文檔類的實例，再依照父節點->子節點的順序依次向下傳遞。但，這還沒有到響應事件的時候。當事件到達最末端的顯示對象時，會按照原路返回到最上層(就是Stage)，這時經過的顯示對象如果在一開始添加了事件偵聽器的話就會觸發偵聽函數。
所以，我們要注意什麽呢？
就是如果你給一個顯示對象和它的子顯示對象都加上了同一個事件的偵聽器很可能會出問題！比如你的某一個mc當做按鈕，而它裡面也有個按鈕，希望兩個按鈕點過之後執行不同的動作，就會碰到這種情況了。
下面我們用一個實例來說清楚這個話題，每一個色塊兒都是可以點的，後面加上了代碼，可以慢慢看。“話不多說，趕快幹活”：
msgTxt = this.getChildByName("msg_txt") as TextField;
father1.addChild(child1);
father2.addChild(child2);
father1.addEventListener(MouseEvent.CLICK, fatherClickHandler);
father2.addEventListener(MouseEvent.CLICK, fatherClickHandler);
child1.addEventListener(MouseEvent.CLICK, child1ClickHandler);
child2.addEventListener(MouseEvent.CLICK, child2ClickHandler);
private function fatherClickHandler(e:MouseEvent):void
{
msgTxt.appendText("冒了。\n");
}
private function child1ClickHandler(e:MouseEvent):void
{
msgTxt.appendText("冒泡了嗎？\n");
}
private function child2ClickHandler(e:MouseEvent):void
{
e.stopPropagation();
msgTxt.appendText("冒泡了嗎？\n");
}
father1.addChild(child1);
father2.addChild(child2);
father1.addEventListener(MouseEvent.CLICK, fatherClickHandler);
father2.addEventListener(MouseEvent.CLICK, fatherClickHandler);
child1.addEventListener(MouseEvent.CLICK, child1ClickHandler);
child2.addEventListener(MouseEvent.CLICK, child2ClickHandler);
private function fatherClickHandler(e:MouseEvent):void
{
msgTxt.appendText("冒了。\n");
}
private function child1ClickHandler(e:MouseEvent):void
{
msgTxt.appendText("冒泡了嗎？\n");
}
private function child2ClickHandler(e:MouseEvent):void
{
e.stopPropagation();
msgTxt.appendText("冒泡了嗎？\n");
}
