title: How to get the ID of a child when mouseover parent
body: <p>I guess that my question is quite simple but I'm a real beginner in JavaScript and I can't find what I am looking for:</p>
  <p>I am trying to get the ID of a li when mouse is over the nav or ul...
  My HTML structure would be:</p>
  <pre><code>&lt;nav&gt;&lt;ul id=&quot;menu&quot;&gt;
  &lt;li id=&quot;FirstLink&quot;&gt;Link1&lt;/li&gt;
  &lt;li id=&quot;SecondLink&quot;&gt;Link2&lt;/li&gt;
  &lt;li id=&quot;ThirdLink&quot;&gt;Link3&lt;/li&gt;
  &lt;/ul&gt;&lt;/nav&gt;
  </code></pre>
  <p>So my goal is to listen for a <code>mouseover</code> (and <code>mouseout</code>) event on each li, but a script with 10 listener (for 5 li) is too much dirty...</p>
  <p>That's why I thought of a script like:</p>
  <pre><code>var menu = document.getElementById(&quot;menu&quot;);
  menu.addEventListener('mouseover', myFunction, false);
  
  function myFunction () {
  //something that get the ID of the &lt;li&gt; that is currently under the mouse and can put it inside a variable as &quot;Link1&quot;
  }
  </code></pre>
  <p>But if there is a better solution, I will be happy to know it ! (I would like to stay in pure js)</p>