javascript - 如何在鼠标悬停在父项上时获取子项的 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;
}

演示 here