addEventListener单击“无序列表”

addEventListener click for Unordered List

本文关键字：无序列表 列表 无序 单击 addEventListener      更新时间：2024-01-02

尝试将一个遍历无序超链接列表的for循环转换为一个使用eventlistener进行赋值的循环，其中每个超链接添加了一个"onclick"函数。我一直找不到一个工作模型。

这是我正在使用的导航列表和链接，请注意，这些我不能以任何方式编辑或更改。

    <body>
<ul id="navlist">
    <li id="l0"> <a href="#">Sniffer</a>    </li>
    <li id="l1"> <a href="#">is</a> </li>
    <li id="l2"> <a href="#">good</a> </li>
    <li id="l3"> <a href="#">programmer</a> </li>
</ul>
<script>
var myLinks = [
                'http://bing.com/search?q=Sniffer',
                'http://bing.com/search?q=is',
                'http://bing.com/search?q=good',
                'http://bing.com/search?q=programmer'
                ];

这是我正在转换的代码示例：

window.onload=function() {
  for (var i=0; i< myLinks.length; i++) {
    // document.getElementById("l"+i).getElementsByTagName("a")[0]).href=myLinks[i];
      document.getElementById("l"+i).getElementsByTagName("a")[0].onclick=(function(idx) {
      var idx = i;
      return function() {  
        window.location.href = myLinks[idx]; 
        return false; // cancel href
        }; 
    })(i);      
  }
}
</script> 
</body>

我尝试了几种不同的方法来格式化串联中的特定文档元素。但它们都不起作用。这是我最近最简单的尝试：

window.onload=function() {
  for (var i=0; i< myLinks.length; i++) {
      document.getElementById("l"+i).addEventListener("click", function() {
      var idx = i;
      return function() {  
        window.location.href = myLinks[idx]; 
        return false; // cancel href
        }; 
    })(i);      
  }
}

我非常需要帮助，因为我已经尝试使用这个代码好几个小时了。我甚至不知道代码是如何转换为点击事件的。提前谢谢。

您可以这样做：

var myLinks = [
    'http://bing.com/search?q=Sniffer',
    'http://bing.com/search?q=is',
    'http://bing.com/search?q=good',
    'http://bing.com/search?q=programmer'];
window.onload = function() {
    for (var i = 0, len = myLinks.length; i < len; i++) {
        document.getElementById("l" + i).addEventListener("click", (function (idx) {
            return function () {
                window.location.href = myLinks[idx];
                return false; // cancel href
            };
        })(i));
    }
};

事件委派是解决此问题的好方法：

var myLinks = [
    'http://bing.com/search?q=Sniffer',
    'http://bing.com/search?q=is',
    'http://bing.com/search?q=good',
    'http://bing.com/search?q=programmer'
];
var list = document.getElementById('list');
list.addEventListener('click', function (event) {
    if (event.target && event.target.nodeName === "A") {
        event.preventDefault();
        var index = Array.prototype.indexOf.call(list.children, event.target.parentNode);
        var href = myLinks[index];
        console.log('link to ' + href + ' was clicked.');
        // window.location = href;
    }
});

Fiddle

相关文章：