addEventListener只用于子菜单链接，不需要jQuery

Question

我只想为#nav ul a链接添加一个事件侦听器。通常我会使用jQuery，但我不能与这个项目。

基本上我需要改变子菜单<UL>的样式时，它的子链接<A>有键盘(标签)的焦点。

所以，HTML:

<ul id="nav">
    <li><a href="#">Top 1</a></li>
    <li><a href="#">Top 2</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>              
    </li>
    <li><a href="#">Top 3</a>
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>              
    </li>
</ul>

我已经使用了Javascript但是它也选择了顶部的<ul id="nav">元素:

<script type="text/javascript">
        function linkOn(e) {
            var target = e.target.parentNode.parentNode;
            target.style.color = "green";
        }
        function linkOff(e) {
            var target = e.target.parentNode.parentNode;
            target.style.color = "";
        }           
        function addListeners() {
            var arrayTop = document.getElementById("nav").getElementsByTagName("a");
            for (var i = 0; i < arrayTop.length; i++)
            {
                arrayTop[i].addEventListener("focus",linkOn,false);
                arrayTop[i].addEventListener("blur",linkOff,false);
            }               
        }
        window.addEventListener('load', addListeners, false);
    </script>

Answer 1

您可以限制通过#nav的li的迭代并分配给它们的链接…querySelectorALL会让事情变得简单很多。

---

困难方法http://jsfiddle.net/Btu4m/

        var nodeList = document.getElementById("nav").getElementsByTagName("ul");
        for (var x = 0; x < nodeList.length; x++)
        {
            var arrayTop = nodeList[x].getElementsByTagName("a");
            for (var i = 0; i < arrayTop.length; i++)
            {
                arrayTop[i].addEventListener("focus",linkOn,false);
                arrayTop[i].addEventListener("blur",linkOff,false);
            }      
        }   

querySelectorAll方法http://jsfiddle.net/Btu4m/1/

        var nodeList = document.querySelectorAll("#nav ul a");
        for (var i = 0; i < nodeList.length; i++)
        {
            nodeList[i].addEventListener("focus",linkOn,false);
            nodeList[i].addEventListener("blur",linkOff,false);
        }