title: How does the browser know which element should get a click or hover event?
body: <p>Javascript lets you fire custom events when the user hovers over an element or when a user clicks on an element. But how does Javascript know which elements should receive the click event?</p>
  
  <p>For example an HTML element like this:</p>
  
  <pre><code>&lt;div style="width: 300; height: 300;"&gt;
      &lt;a href="hello"&gt;Hello World&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I click on the link, the browser knows to execute all click events attached to that link. But how does the browser know where on the page the link is (or even that it's visible?)</p>
  
  <p>Consider:</p>
  
  <pre><code>&lt;div id="mydiv" style="width: 300; height: 300;"&gt;
      &lt;a href="hello"&gt;Hello World&lt;/a&gt;
  &lt;/div&gt;
  &lt;style&gt;
      #mydiv a {
          display: none;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>Now nothing will happen when I click on the space where the link used to be visible. How does the browser know not to fire click/hover events in this case? If I wanted to recreate the algorithm used, what elements would I need?</p>
  
  <p>I assume there is some function in browser code that looks like this:</p>
  
  <pre><code>/* Take user's mouse coordinates and return a DOM element. */
  function returnElementBasedOnMouseCoordinate(x, y) {
  
      /* Does a lookup function on some data structure */
      return someElementInTheDom;
  }
  </code></pre>
  
  <p>How does that function work?</p>