title: How to always get the outermost element in JavaScript
body: <p>I have a bunch of div elements, all with a specific id. Inside these divs are also divs. Now, if I add an onclick listener to the outermost element, it's not returning its id. Maybe an example can explain better:</p>
  
  <pre><code>&lt;div id="id1"&gt;&lt;div id="bla1"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div id="id2"&gt;&lt;div id="bla2"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;div id="idn"&gt;&lt;div id="blan"&gt;&lt;/div&gt;&lt;/div&gt;
  
  document.getElementById("id1").onclick = displayId;
  document.getElementById("id2").onclick = displayId;
  document.getElementById("idn").onclick = displayId;
  
  function displayId(evt) {
      console.log(evt.target.id);
  }
  </code></pre>
  
  <p>If I click on one of the divs now it displays the id of the inner div.
  How can I get this to alyways display the id of the outer dviv?</p>
  
  <p>NOTE: The inside div is the same size as the outer.</p>