title: How to add event listener to child that doesn't trigger the event listener on parent?
body: <p>I am trying to add event listeners to two elements, container and archive. They are in this hierarchy - container-&gt;timestamp-&gt;archive.</p>
  <p>I added a event listener to archive button in the following way,</p>
  <pre><code>archive.addEventListener('click', ()=&gt;{
      console.log(&quot;HI&quot;);
    })
  </code></pre>
  <p>In a similar way, I attached event listener to archive button's parent, container,</p>
  <pre><code>container.addEventListener('click', ()=&gt;{
      open_email(element.id);
    })
  </code></pre>
  <p>Whenever I click on archive button, container's event listener gets triggered which is not desirable. I tried looking up event delegation but didn't get any idea to solve this problem. Any help would be appreciated.</p>