title: addEventListener event on parent target child
body: <p>I'm doing a small application just to learn ES6 stuff and I've found a problem with <code>addEventListener</code> and parent/child events.</p>
  <p>I have a menu consisting on several divs that have an image (an avatar) and some text. Each div has an data-id attribute to get the clicked elements id and I have put an <code>addEventListener</code> on each row:</p>
  <pre><code>&lt;div class=&quot;row&quot; data-id=&quot;1&quot;&gt;
    &lt;img src=&quot;avatar&quot; /&gt;
    Lorem ipsum
  &lt;/div&gt;
  ...
  </code></pre>
  <p>And the js:</p>
  <pre><code>const rows = document.querySelectorAll('.row');
  rows.forEach(row =&gt; row.addEventListener('click',selectRow));
  
  function selectRow(e){
    var row = e.target;
    alert(row.dataset.id);
  }
  </code></pre>
  <p>The problem comes when I click on the avatar. It fires the click event, but the target is the img element, not the div, so I can't get the data-id attribute.</p>
  <p>I have tried many approaches (like <a href="https://stackoverflow.com/questions/34113635/click-event-on-child-div-trigger-action-despite-click-handler-was-set-on-parent">this one</a>) but it prevents firing the event when clicking on the avatar, so not on a solution as the avatar is part of the row and it may get clicked :S</p>
  <p>I have set a jsfiddle to show my problem. Any help would be appreciated :)</p>
  <p><a href="https://jsfiddle.net/igorosabel/o64b404y/1/" rel="nofollow noreferrer">https://jsfiddle.net/igorosabel/o64b404y/1/</a></p>