Question

This is my html:

(note: I didn’t use a background image on the a just for simplicity to show someone how this could work)

<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>

And my 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>

Why is the element in fooClick the image and not the anchor? How should I have done this to use the image.

Answer 1

Whilst the click handler is bound to the anchor, the click event is raised on the image. The event bubbles up the DOM and the event handler on the anchor gets called. event.element() is the element that the event was raised on