Javascript addEventListener单击查看无序列表_Javascript_Html

Javascript addEventListener单击查看无序列表

javascript html

Javascript addEventListener单击查看无序列表,javascript,html,Javascript,Html,正在尝试使用eventlistener将一个for循环转换为一个for循环，该for循环通过一个无序的超链接列表将一个“onclick”函数添加到每个超链接中，并使用eventlistener进行赋值。我一直无法得到一个工作模型这是我正在使用的导航列表和链接，请注意，我无法以任何方式编辑或更改这些链接 <body> <ul id="navlist"> <li id="l0"> <a href="#">Sniffer</a&

正在尝试使用eventlistener将一个for循环转换为一个for循环，该for循环通过一个无序的超链接列表将一个“onclick”函数添加到每个超链接中，并使用eventlistener进行赋值。我一直无法得到一个工作模型

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

    <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'
                ];








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（）{
对于（var i=0；i


我尝试了几种不同的方法来格式化连接中的特定文档元素。但它们都不起作用。以下是我最近最简单的尝试：
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);      
  }
}

window.onload=function（）{
对于（var i=0；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;
    }

});

您可以这样做：
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'];
window.onload=函数（）{
for（var i=0，len=myLinks.length；i
for循环无法绕过，这是HTML5类中的一个赋值，因此很遗憾，我的选项有限。我也从未遇到过：var index=Array.prototype.indexOf.call（list.children，event.target.parentNode）；因此，我们不能将其用作解决方案。它必须与我当前的解决方案类似。我在这个解决方案中做错了什么，这就是我需要知道的。谢谢，这就是我需要的。虽然在我当前的设置中不需要解析格式，但这是有效的。我无法理解我的代码的问题，现在我看到，在eventlistener参数中使用IIFE时，我不需要添加返回函数。这实际上对我来说不是一个完美的答案，我现在注意到外壳被删除了。我必须为这项任务保留附件。@Sniffer我已经更新了答案。问题在于函数闭包。