Actual target for MouseEvent.CLICK - spark skins

Question

Hello,
I have a question about Event Listeners and targeting events.
In my AIR app for mobile I need to click / tap on a number of s:Image objects.
At first I added to each of them an Event Listener linked to an Event Handler. Then, trying to optimize my code, I moved the Event Listener to the container object as suggested in various optimization resources I found online.
The problem was that the event.target property was not the clicked image, but a s:Group. I eventually figured out that the s:Group was part of the skin of the s:Image, and I fixed the problem by using the target.owner property, but this behavior really created a lot of confusion. I couldn’t find anything about it on the Adobe development resources, as they just insist on (and explain quite well) the difference between the target and currentTarget properties.
Below you can find a simple representation of my workaround, but I was wondering if:
1) This was actually caused by some mistake I made, and if it could be more easily avoided;
2) There is a better or more efficient workaround than the one I came up with;
3) The topic is discussed somewhere in the documentation.
Thanks a lot!
import spark.components.Image;
private var image1:Image;
private function initComponent():void
     image1 = new Image();
     image1.source = "assets/aaa.png";
     image1.id = "thisIsTheImage";
     addElement(image1);
     addEventListener(MouseEvent.CLICK, clickHandler);          // 1
//   image1.addEventListener(MouseEvent.CLICK, clickHandler);     // 2 - the old one
private function clickHandler(event:MouseEvent):void
     trace("event.currentTarget \t\t\t" +              event.currentTarget);
     trace("event.target \t\t\t\t" +                   event.target);
     trace("event.target.owner.owner \t\t" +           event.target.owner.owner);
     trace("image1.imageDisplay.displayObject \t" +    image1.imageDisplay.displayObject);
     if(event.target.owner.owner is Image){
          // do something
console:
event.currentTarget                     TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33
event.target                            TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage.ImageSkin43.Group44
event.target.owner.owner                TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage
image1.imageDisplay.displayObject       TestApp0.ViewNavigatorApplicationSkin2.navigator.ViewNavigatorSkin4.contentGroup.TestView33.SkinnableContainerSkin35.contentGroup.thisIsTheImage.ImageSkin43.Group44

Answer 1

Hey,
thanks a lot!
What about using SpriteVisualElement?
By looking at ther inheritance chains it should be lighter than Image but heavier than BitmapImage:
Image SkinnableComponent UIComponent FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
SpriteVisualElement FlexSprite Sprite DisplayObjectContainer InteractiveObject DisplayObject EventDispatcher Object
BitmapImage GraphicElement EventDispatcher Object
I'd like to use it over BitmapImage beacause it inherits from InteractiveObject and is therefore clickable.
Would this be a good idea?