How do skinned Flex UIComponents capture mouse events?

Question

If my understanding of Flex is correct, skins in Flex are just DisplayObjects that are added as children to UIComponents to create the visual representation of the object. But if my understanding of the Flash event model is correct, if there is a non-transparent DisplayObject on top of another, mouse events will go to the topmost DisplayObject. The overlapped DisplayObject won't receive any mouse input.

So how is it that skinned Flex UIComponents work at all?

Answer 1

This page has a pretty good explanation of the eventing mechanism in Flex:

http://livedocs.adobe.com/flex/3/html/help.html?content=events_08.html

The key I believe is that MouseEvents will bubble by default. Since the skin elements are added as children of a component's display list (in "rawChildren") the event will still bubble up to the parent.

Answer 2

You should still be able to add MouseEvent listeners to the host component - the best example is a skinned button. You treat it like any other button.

In a more complex skinned component though you add listeners to individual skin components in the host component. These events should bubble up to the host component as well though.