使用“ for”循环添加“ click”事件监听器

Question

HTML：

<li>Facebook</li>
<li>Twitter</li>
<li>Souncloud</li>

JS：

var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com'];

function openURL (url) {
    location.href = url;
}

window.onload = function () {

    var listElement = document.getElementsByTagName('li');

    for (i=0;i<listElement.length;i++) {
        listElement[i].addEventListener('click',openURL(links[i]))
    }

}

我希望代码以这样一种方式工作：当用户单击任一列表元素时，它将打开相应的网站。 由于某些原因，我不想使用<a>标记。

代码的逻辑非常简单。 首先，创建一个变量，该变量返回文档中所有<li>标签的数组。 然后使用“ for”循环，我为数组中的每个<li>标签设置了一个事件侦听器。 我运行的功能只是打开网站。

无论如何，每当我打开页面时，它都会自动重定向到Facebook.com，而无需单击。 为什么会这样？

任何帮助，将不胜感激，谢谢！

Answer 1

这是因为您的事件处理程序将在以后（通过用户操作）调用，而那时， i不是您想要的。 您必须使用闭包将其保留在内部。

 var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com']; function openURL(link) { console.log(link); }; window.onload = function () { var listElement = document.getElementsByTagName('li'); for (i=0;i<listElement.length;i++) { listElement[i].addEventListener('click',(function (i) { return function () { openURL(links[i]); }; }(i))); } } 

 <li>Facebook</li> <li>Twitter</li> <li>Souncloud</li> 

Answer 2

当您click',openURL(links[i]) ，它将调用openUrl 。 您应该使用.bind(context, params) 。 还要注意，eventListener的第一个参数是event

同样， window.onload = function被认为是不好的做法，因为它将覆盖以前的所有侦听器。 您应该使用.addEventListener

 var links = ['https://www.facebook.com/', 'https://twitter.com', 'https://soundcloud.com']; function openURL(event, url) { //location.href = url; console.log(url) } window.addEventListener('load', function() { var listElement = document.getElementsByTagName('li'); for (i = 0; i < listElement.length; i++) { listElement[i].addEventListener('click', openURL.bind(null, event, links[i])) } }) 

 <li>Facebook</li> <li>Twitter</li> <li>Souncloud</li>