<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao"
applicationComplete="initFn()">
<!-- Demo_如何停止事件传播
猜想:事件流_事件触发顺序
首先被触发的是按钮里边添加的监听器(在MXML中添加),接着是通过addEventListener()添加的监听器,
接着事件就冒泡到按钮父组件HGroup,触发父组件里边的监听器。
不过使用event.stopPropagation()或者event.stopImmediatePropagation()都会阻止事件从按钮冒泡
到其父组件,两者的区别就是stopPropagation()函数会在给定组件(按钮)上的所有其他事件监听器完成对这个
事件(比如MouseEvent)的响应之后停止传播,而stopImmediatePropagation则是直接停止此事件传播。
-->
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function initFn():void{
// 添加事件监听器;
button.addEventListener(MouseEvent.CLICK, onClick);
box.addEventListener(MouseEvent.CLICK, onParentClick);
}
protected function button_clickHandler(event:MouseEvent):void
{
Alert.show("MXML click event.", "MXML Event");
trace("第一个被触发 Event");
//event.stopPropagation(); // 事件停止传播--但是第二个监听器会触发;
event.stopImmediatePropagation(); // 停止传播--后面所有监听器都不会触发;
}
protected function onClick(event:Event):void{
Alert.show("AS event.Calling stopPropagation", "AS Event");
trace("第二个被触发 Event");
}
protected function onParentClick(event:Event):void{
// 事件永远不会传播(冒泡)到父组件,不管使用event.stopPropagation()或者event.stopImmediatePropagation()。
Alert.show("You should never see this alert.", "Parent Event");
trace("第三个被触发 Event");
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 非可视元素 -->
</fx:Declarations>
<!--view-->
<s:HGroup id="box" horizontalCenter="0" verticalCenter="0">
<s:Button id="button" label="FireEvent" click="button_clickHandler(event)"/>
</s:HGroup>
</s:Application>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
minWidth="1024" minHeight="768" pageTitle="TheStudioOfCenyebao"
applicationComplete="initFn()">
<!-- Demo_如何停止事件传播
猜想:事件流_事件触发顺序
首先被触发的是按钮里边添加的监听器(在MXML中添加),接着是通过addEventListener()添加的监听器,
接着事件就冒泡到按钮父组件HGroup,触发父组件里边的监听器。
不过使用event.stopPropagation()或者event.stopImmediatePropagation()都会阻止事件从按钮冒泡
到其父组件,两者的区别就是stopPropagation()函数会在给定组件(按钮)上的所有其他事件监听器完成对这个
事件(比如MouseEvent)的响应之后停止传播,而stopImmediatePropagation则是直接停止此事件传播。
-->
<fx:Script>
<![CDATA[
import mx.controls.Alert;
protected function initFn():void{
// 添加事件监听器;
button.addEventListener(MouseEvent.CLICK, onClick);
box.addEventListener(MouseEvent.CLICK, onParentClick);
}
protected function button_clickHandler(event:MouseEvent):void
{
Alert.show("MXML click event.", "MXML Event");
trace("第一个被触发 Event");
//event.stopPropagation(); // 事件停止传播--但是第二个监听器会触发;
event.stopImmediatePropagation(); // 停止传播--后面所有监听器都不会触发;
}
protected function onClick(event:Event):void{
Alert.show("AS event.Calling stopPropagation", "AS Event");
trace("第二个被触发 Event");
}
protected function onParentClick(event:Event):void{
// 事件永远不会传播(冒泡)到父组件,不管使用event.stopPropagation()或者event.stopImmediatePropagation()。
Alert.show("You should never see this alert.", "Parent Event");
trace("第三个被触发 Event");
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 非可视元素 -->
</fx:Declarations>
<!--view-->
<s:HGroup id="box" horizontalCenter="0" verticalCenter="0">
<s:Button id="button" label="FireEvent" click="button_clickHandler(event)"/>
</s:HGroup>
</s:Application>