Beginning Flex: TileList using the itemClick vs click events

Recently I was working on a new interface component to an app I was building at work. It was a series of thumbnails, each of which triggered a modal window containing a video. I decided that the TileList component made the most sense. So I coded it up and got it working in no time at all. The problem that I was having was that when I assigned the click event to the TileList, I could click anywhere in the control and it would fire the event, even on empty space. After trying to manage the click event in code, I asked on Twitter about it. Not too long after, T. Scot Clausing replied to let me know about itemClick. This blog post is a quick way to illustrate the difference between click and itemClick, and why you might use one over the other. Let's tale a look at the project first

You'll notice that for all intents and purposes the two TileList components are identical. However they are indeed different in one key area. The component on the left uses the click event, while the one on the right uses the itemClick event. Click anywhere in the white space to the right, or under, the albums of the component on the left side. You'll see it generates an error while the TileList on the right behaves just fine. This is because when using the click event on a TileList component, it assigns the click event to the entire component whereas the itemClick event is only assigned to each individual item. It's a subtle different to be sure, and in fact one that could be handled in code by inspecting the event. But why do that when Flex already has an event built in for that?

As always, right click on the project to view the entire source, or you can download the Flex Builder project.