具有相同父级的所有元素的一个事件侦听器，即使有些被放置在代表多个节点的变量中

Question

好的，我想组织我的脚本并对所有事件使用 1 个事件侦听器，因为这些事件的所有元素都属于一个父级，即页面的导航标签，但我通过 querySelectorAll 收集了其中一些元素，这意味着它们现在是数组，对象的集合，我希望它的逻辑是这样的：

const topNav = document.querySelector(".topNav");

const topNavChildrenLis = document.querySelectorALL(".topNav li");

topNav.addEventListener("click", (event)=>{

if(event.target == topNavChildrenLis){

//do this and that

} 

//and so on and so forth for other elements 

});

我知道这个表达式“event.target == topNavChildrenLis”不起作用，我也尝试通过做这样的事情来返回数组的节点“event.target == topNavChildrenLis.forEach((nodes)=>{ return nodes; } )”而且它也不起作用，有什么办法可以做到这一点吗？谢谢你的帮助:)

Answer 1

首先，制作const topNavChildrenLis = document.querySelectorALL(".topNav li");和数组的结果，以便您可以使用数组方法const topNavChildrenLis = Array.from(document.querySelectorAll(".topNav li"));或者const topNavChildrenLis = [ ...document.querySelectorAll(".topNav li") ];现在你可以做这样的事情let tgt = topNavChildrenLis.find(el => el === event.target);现在tgt只有当它存在于数组中时才会是 event.target