将鼠标悬停在父项上时如何获取子项的ID

Question

我想我的问题很简单，但是我是javascript的真正初学者，找不到我想要的东西：

当鼠标悬停在导航或ul上时，我试图获取li的ID。我的HTML结构为：

<nav><ul id="menu">
<li id="FirstLink">Link1</li>
<li id="SecondLink">Link2</li>
<li id="ThirdLink">Link3</li>
</ul></nav>

所以我的目标是在每个li上监听一个mouseover（和mouseout）事件，但是一个包含10个监听器（对于5 li）的脚本实在是太脏了……

这就是为什么我想到这样的脚本：

var menu = document.getElementById("menu");
menu.addEventListener('mouseover', myFunction, false);

function myFunction () {
//something that get the ID of the <li> that is currently under the mouse and can put it inside a variable as "Link1"
}

但是，如果有更好的解决方案，我将很高兴知道！（我想留在纯js）

Answer 1

要获取悬停元素的 ID，您需要使用event.target。
为此，您需要event在函数中作为参数传递。
然后您可以获得该元素的.id属性。

function myFunction(event) {
    show_result.innerHTML = event.target.id;
}

演示在这里