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
<a> all ...