Javascript 有没有更有效的方法来编写此代码？

所以我一直在尝试在网站的导航链接上用js创建一些悬停状态动画。我用这段代码做到了这一点，我非常确信有一种更有效的方法可以做到这一点。如果您对此有任何意见，我将不胜感激：）

---

只需迭代找到的项的集合。

querySelectorAll

方法返回一个

NodeList

对象。只需使用

forEach

方法添加事件侦听器

const nodeList = document.querySelectorAll('.some-selector');
nodeList.forEach(element => {
    element.addEventListener('mouseleave', myFunc, false);
});

---

您只需在

querySelectorAll（'.navItem'）

上使用

forEach

，然后在每个项目上使用

addEventListener

，例如：

document.querySelectorAll（'.navItem'）.forEach（navItem=>{
navItem.addEventListener（'mouseenter'，hoverStateNav）；
navItem.addEventListener（'mouseleave'，hoverStateNav）；
});
函数hoverStateNav（）{
console.log（“你好”）；
//this.firstElementChild.classList.toggle（“hoverLineActive”）；
这个.classList.toggle（“粗体”）；
}

项目
项目
项目
项目
项目
项目

---

有些浏览器可能不支持foreach on node列表，因此请使用数组方法或简单for循环

这些元素有多少？你想让听众只听前6个还是全部听？`谢谢你，马塞尔！我使用了这个解决方案，效果很好：）谢谢，阿莱西奥！

const nodeList = document.querySelectorAll('.some-selector');
nodeList.forEach(element => {
    element.addEventListener('mouseleave', myFunc, false);
});

    document.querySelectorAll(".navItem").forEach((item) => {
        item.addEventListener("mouseenter", hoverStateNav);
        item.addEventListener("mouseleave", hoverStateNav);
    });