使用JavaScript将事件侦听器添加到多个元素

Question

所以，我想做的是针对＃menu-wrap li's中的所有a标签。 我是JS的新手，所以很抱歉，如果我缺少明显的东西！

使用Javascript：

var menuLink = document.querySelector( '#menu-wrap li' );    
for (var i = 0; i < menuLink.children.length; i++) {
var childElement = menuLink.children[i];
childElement.addEventListener('click', doSomething, false);
}

function doSomething() {
    alert("Hello");
}

HTML

<div class="menu-wrap" id="menu-wrap">
    <nav class="menu">
        <ul id="menu-mobile-menu" class="menu">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 1</a></li>
        </ul>
    </nav>              
</div>

Answer 1

querySelector ：

返回文档（使用文档的节点的深度优先前序遍历|通过在文档标记第一元件和由子节点的数量的顺序通过顺序节点迭代）中的第一个元素选择器的指定的组相匹配。

您想使用querySelectorAll然后在结果节点列表上循环（或者您想将事件处理程序绑定到#menu-wrap自身，然后使用event.target来确定单击了哪个列表项）。

列表项并非旨在作为交互式控件。 您应该改用链接或按钮。

Answer 2

Document.querySelector仅获取第一个元素。 但是您可以使用类来做到这一点。 做这个。 只是attatch类sth你希望有什么功能。

HTML

<div class="menu-wrap" id="menu-wrap">
            <nav class="menu">
                <ul id="menu-mobile-menu" class="menu">
                    <li class="sth"><a href="#">Link 1</a></li>
                    <li class="sth"><a href="#">Link 2</a></li>
                    <li class="sth"><a href="#">Link 1</a></li>
                </ul>
            </nav>
</div>

JS

var menuLink = document.getElementsByClassName("sth");
for(var i = 0; i <  menuLink.length; i++ ) {
    var childElement = menuLink[i];
    childElement.addEventListener('click', doSomething, false);
}

function doSomething() {
    alert("Hello");
}