The journey of an event

When an event occurs on a page, an entire hierarchy of DOM elements gets a chance to handle the event. Consider a page model similar to the following screenshot:

<div class="foo">
  <span class="bar">
    <a href="http://www.example.com/">
      The quick brown fox jumps over the lazy dog.
    </a>
  </span>
  <p>
    How razorback-jumping frogs can level six piqued gymnasts!
  </p>
</div>

We then visualize the code as a set of nested elements, as shown in the following figure:

For any event, there are multiple elements that could logically be responsible for reacting. When the link on this page is clicked, for example, the <div>, <span>, and <a> all should get the opportunity to respond to the click. After all, the three are all under the user's mouse cursor at the time. The <p> element, on the other hand, is not part of this interaction at all.

One strategy for allowing multiple elements to respond...