Событие странной странности

Question

Я вижу странность в пузырях событий, что говорит о том, что я не совсем понимаю, как это должно работать.

У меня есть компонент, расширяющий DataGroup, и средство визуализации элементов отправляет событие (которое всплывает).

// MyRenderer.mxml
<s:ItemRenderer>
    <s:Button click='dispatchEvent(new Event('customEvent',true))' />
</s:ItemRenderer>

DataGroup добавляет прослушиватель для события к себе.

// MyDataGroup.mxml
<s:DataGroup  itemRenderer="MyRenderer" creationComplete='onCreationComplete()'>
   <fx:Metadata>
       [Event(name='customEvent',type='flash.events.Event')]
   </fx:Metadata>
   <fx:Script>
      private function onCreationComplete():void
      {
          addEventListener('customEvent',onCustomEvent);
      }
      private function onCustomEvent(event:Event):void
      {
      }
   </fx:Script>
</s:DataGroup>

Родитель группы данных также добавляет прослушиватель для события.

// MyComponent.mxml
<s:Group>
    <MyDataGroup customEvent='onCustomEventHandler()' />
</s:Group>

Я ожидал, что обработчик, зарегистрированный в MyDataGroup, должен сначала перехватить событие, а затем обработчик в MyComponent.

Тем не менее, я вижу обратное, т. Е. Попало в MyComponent, затем в MyDataGroup. Когда пойман, event.phase == EventPhase.BUBBLING.

Что здесь происходит? Почему я вижу это поведение?

Я использую Flex 4.0.

Answer 1

Я почти уверен, что проблема в том, что оба ваших слушателя событий слушают один и тот же экземпляр компонента MyDataGroup.

Если вы добавите прослушиватель событий в MyComponent вместо MyDataGroup, вы получите ожидаемое поведение:

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300" 
          initialize="group1_initializeHandler(event)">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.FlexEvent;
            public function onCustomEventHandler(event:Event):void{
                trace('my Component handler');
            }

            protected function group1_initializeHandler(event:FlexEvent):void
            {
                // add the event listener to 'this' 
                this.addEventListener('customEvent',onCustomEventHandler);
            }

        ]]>
    </fx:Script>
    <martyPitt:MyDataGroup id="dataGroup"  />
    <!-- The event listener here was listening on the myDataGroup instance, not on the MyComponent instance customEvent="onCustomEventHandler(event)"  -->
</s:Group>

Я подозреваю, что прослушиватели событий - хотя и не в том же компоненте- стреляли по порядку их добавления.Вы должны изучить сгенерированный ActionScript с аргументом компилятора '-keep', чтобы выяснить это конкретно.Я подозреваю, что ваш встроенный слушатель (MyComponent) добавлен в конструктор MyDataGroup.Так как другой слушатель добавляется в MyDataGroup обработчик creationComplete, слушатель MyComponent запускается первым.

Answer 2

Действительно странное поведение.

На самом деле, когда вы добавляете встроенный прослушиватель событий (в вашем примере:

  <MyDataGroup
 customEvent='onCustomEventHandler()'
 />

), платформа добавляет прослушиватель событий на этапе захвата.Таким образом, это ожидаемое поведение, которое сначала входит в ваш родительский обработчик.Я не понимаю, что eventPhase равно EventPhase.BUBBLE_PHASE, хотя должно отображать EventPhase.CAPTURE_PHASE.