addEventListener只适用于子菜单链接，不带jQuery

Question

我想只为#nav ul a链接添加一个事件监听器。 Ordinerly我会使用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);
        }