javascript - 为什么这个原型(prototype)代码会这样工作？

Question

这是我的 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 中的元素是图像而不是 anchor ？我应该如何做到这一点才能使用图像。

Answer 1

当单击处理程序绑定(bind)到 anchor 时，会在图像上引发单击事件。该事件在 DOM 中冒泡，并调用 anchor 上的事件处理程序。 event.element()是引发事件的元素