为什么这个原型代码是这样工作的?

这是我的HTML:

(注意:我并不是为了简单起见而使用A上的背景图像来向某人展示这是如何工作的)

<div class="foo">
    <ul>
        <li><a href="#" class="bar"><img src="bar.gif" /></a></li>
        <li><a href="#" class="baz"><img src="baz.gif" /></a></li>
    </ul>
</div>

我的javascript:

<script type="text/javascript">
    Event.observe(window, 'load', function() {
        $$('.foo a').each(function(a) {
            alert(a); // this is the anchor
            a.observe('click', fooClick);
    });

    function fooClick(event) {
        alert(event.element()); // this is the img
    }
</script>

为什么fooclick中的元素是图像而不是锚?我该怎么做才能使用图像。