鼠标悬停父母时如何获取孩子的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

Answer 2

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

function myFunction (event) {
    var li = event.target;
    if( li.nodeName !== 'li' ) return;

    // do your stuff with li
}

Answer 3

仅将事件放在子元素上

var menu = document.getElementById("menu");
for( var counter = 0; counter< menu.childNodes.length; counter++)
{
    menu.childNodes[ counter ].addEventListener('mouseover', function(){
      alert( "id is  " + this.id  ); 
    }, false);
}