title: Javascript Event Listener on click not working as expected
body: <p>I'm trying to create one event listener to handle all my "clicks" by putting it on the body and doing some event delegation.  A simple example of what i'm trying to do is this:</p>
  
  <pre><code>&lt;html&gt;
   &lt;body&gt; 
    &lt;div id = "div1"&gt;
     &lt;ul&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li&gt;3&lt;/li&gt;
     &lt;ul&gt;
    &lt;/div&gt;
     &lt;script&gt;
      document.body.addEventListener('click', function(e){
       if(e.target.id == "div1"){alert("hi")}
      })
     &lt;/script&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I expect from the code above is that when I click on the "li" elements, the alert would fire since it is nested within the parent div.  I thought that the event would propagate to the parent and fire.  However, it doesn't seem to be working at all if I click on the li elements.  Can someone help explain what's happening? Thank you!</p>
  
  <p>If i was to do it the normal way by adding the eventListener directly to the div id, it would then work.   </p>