title: How to get data attribute of element when click on it or it child
body: <p>I am making a <strong>Table</strong>.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector('table').addEventListener('click', (e) =&gt; {
    console.log(e.target);
    console.log(e.target.dataset.item);
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td {
    padding: 8px;
    border: 1px solid black;
    background-color: blue;
  }
  
  span {
    background-color: red;
    padding: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table&gt;
    &lt;tr&gt;
      &lt;td data-item="item1"&gt;&lt;span&gt;1&lt;/span&gt;&lt;/td&gt;
      &lt;td data-item="item2"&gt;&lt;span&gt;2&lt;/span&gt;&lt;/td&gt;
      &lt;td data-item="item3"&gt;&lt;span&gt;3&lt;/span&gt;&lt;/td&gt;
      &lt;td data-item="item4"&gt;&lt;span&gt;4&lt;/span&gt;&lt;/td&gt;
      &lt;td data-item="item5"&gt;&lt;span&gt;5&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I click the <strong>BLUE PART</strong>, I can get <code>data-item</code> attribute. But when I click the <strong>RED PART</strong>, I can't. </p>
  
  <p>I wanna fix it, if I click <code>&lt;span/&gt;</code> in <code>&lt;td/&gt;</code>, I want to get <code>data-item</code> attribute from <code>&lt;td /&gt;</code>.</p>