Learning jQuery 3 - Fifth Edition

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 like the following:

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

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> elements should all get the opportunity ...