复合自定义组件上的 Flex 3 事件传播？答案

【问题标题】：Flex 3 event propagation on a composite custom component?复合自定义组件上的 Flex 3 事件传播？
【发布时间】：2010-11-13 21:12:14
【问题描述】：

我有一个由可选控件（单选按钮）组成的自定义组件和文本输入。我想执行一些逻辑来响应从这两个控件更改事件，但之后我想要在复合组件的更改处理程序上注册的任何内容也要进行更改以处理事件。问题是，当我重新调度事件目标已更改为我的自定义的事件组件，丢失原始事件的目标。

这是我的自定义组件：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" label="{listItem.@text}" data="{listItem.@level.toString()}">

    <mx:Script>
        <![CDATA[
            import mx.controls.RadioButtonGroup;
            [Bindable]
            public var selected: Boolean;
            [Bindable]
            public var text: String;
            [Bindable]
            public var listItem: XML;
            [Bindable]
            public var group: RadioButtonGroup;

            private function onSelectionChange(event: Event): void {
                selected = event.target.selected;
                dispatchEvent(event);
            }

            private function onTextChange(event: Event): void {
                text = event.target.text;
                dispatchEvent(event);
            }
        ]]>
    </mx:Script>

    <mx:RadioButton group="{group}" label="{label}" selected="{selected}" change="onSelectionChange(event)"/>
    <mx:TextInput width="100%"
                  maxChars="{listItem.specify.@entryLength}"
                  enabled="{selected}"
                  visible="{listItem.hasOwnProperty('specify')}"
                  includeInLayout="{visible}"
                  change="onTextChange(event)"/>
</mx:HBox>

在从该组件接收更改事件的事件处理程序中，我看到 event.target 是 SpecifyRadioButton 的一个实例，而不是正如我所料，TextInput 或 RadioButton。我应该如何传播在这里得到我想要的东西？

Getting event [Event type="change" bubbles=false cancelable=false eventPhase=2] 
from question0.tabSurvey.questionForm.questionContainer.Single94.VBox95.SpecifyRadioButton111

【问题讨论】：

标签： apache-flex actionscript-3 flex3 event-handling

【解决方案1】：

不要重新调度原始事件，而是创建一个新事件并将原始事件作为origEvent 属性传递。 SpecifyRadioButton 调度的新事件可以是扩展 Event 的自定义事件类，也可以是懒惰的，只使用 mx.events.DynamicEvent。

例子：

import mx.events.DynamicEvent;

private function onSelectionChange(event: Event): void {
    selected = event.target.selected;
    var newEvent:DynamicEvent = new DynamicEvent(Event.CHANGE);
    newEvent.origEvent = event;
    dispatchEvent(newEvent);
}

然后，在 SpecifyRadioButton.change 事件的处理程序中，引用 event.origEvent 属性。

【讨论】：

【解决方案2】：

事件的目标是 SpecifyRadioButton 是有道理的，因为这就是调度事件的原因。

TextInput 组件的“更改”事件设置为不冒泡，这意味着它可以被与它相同的组件中的侦听器侦听，但不能在其他任何地方侦听。如果您希望更改事件冒泡，您将不得不扩展 TextInput 类（或使用类似Mate 的漂亮东西）。

package {

    import flash.events.Event;
    import mx.controls.TextInput;

    public class CarbonatedTextInput extends TextInput {
        public function CarbonatedTextInput () {
            super();
            addEventListener(Event.CHANGE, forceBubbles);
        }

        /* 
           We have to remove the event listener before we
           dispatch the new event (with bubbles!) because
           otherwise our listener in the constructor would
           catch us and put us in an endless loop...
           resulting in a **STACK OVERFLOW** 
        */
        protected function forceBubbles(e:Event):void {
            removeEventListener(Event.CHANGE, forceBubbles);
            dispatchEvent(new Event(Event.CHANGE, true));
            addEventListener(Event.CHANGE, forceBubbles);
        }
    }
}

【讨论】：