使用“ 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]))
    }

}

I want the code to work in such a way that when the user clicks either of the list elements, it opens up the respective website. For certain reasons I do NOT want to use the <a> tag.

The logic to the code is very simple. First, a variable is created which returns an array of all the <li> tags in the document. Then using the 'for' loop, I set an event listener to each of the <li> tags in the array. The function I run simply opens the website.

Somehow, whenever I open the page, it gets redirected automatically, without clicking, to facebook.com. Why does this happen??

Any help would be appreciated, thanks!

Answer 1

This is because your event handler will be called later (by user action), and that time, i isn't what you want. You have to use closure to keep it internal.

 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

When you do click',openURL(links[i]) , it will call openUrl . You should use .bind(context, params) . Also note, first argument of eventListener is event

Also, window.onload = function is considered as bad practice as it will override any previous listener. You should use .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>