title: Event listener for when child of parent is clicked
body: <p>I currently have an issue where I want to be able to check when a event is click. I want to use event delegation for this and so I have setup an event listener on a parent div, which listens for clicks:</p>
  
  <pre><code>document.querySelector('.side-nav').addEventListener('click', e =&gt; {
      console.log(e.target.data.set.param);
  });
  </code></pre>
  
  <p>This is my DOM:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="side-nav"&gt;
      &lt;div class="side-nav-button side-nav-active pointer" id="dashboard-shortcut" title="Home" data-page="dashboard"&gt;
          &lt;p class="side-nav-button-icon"&gt;&lt;i class="fas fa-home"&gt;&lt;/i&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="side-nav-button side-nav-active pointer" id="another-div-shortcut" title="page2" data-page="page2"&gt;
          &lt;p class="side-nav-button-icon"&gt;&lt;i class="fas fa-cross"&gt;&lt;/i&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to be able to get the <code>data-page</code> attribute when the right div is clicked, ie when the div <code>dashboard-shortcut</code> is clicked. Is there any way that I can do this?</p>
  
  <p>Thank you very much in advance.</p>