使用addEventListener和getElementsByClassName传递元素ID

Question

我正在定义JSON文件中的项目列表，并将该列表显示在网页上。目的是让用户单击该列表中的任何项目以显示有关该项目的更多信息（保存在同一JSON文件中的信息）。

该列表的所有项目都是同一类的成员，并且每个项目都有一个从JSON文件定义的唯一ID。HTML看起来像这样：

<ul>
   <li class="menu" id="bob">Robert Smith</li>
   <li class="menu" id="jane">Jane Doe</li>
   <li class="menu" id="sue">Susan Carter</li>
</ul>

我打算使用一些类似的方法

var userSelection = document.getElementsByClassName('menu');

与

userSelection.addEventListener('click', myFunctionToPrintDetails());

但我不确定如何将ID从事件侦听器传递到打印功能，以确定要打印的详细信息。

我在HTML / CSS方面有丰富的经验，但在JSON /
AJAX方面却很少，因此我可能会尝试完全低音处理。如果有更合适的方法可以做到这一点，我欢迎您提供反馈。

我尝试了两个答案，但均无济于事。当我将userSelection.length登录到控制台时，我得到0; 当我登录userSelection时，我得到：

HTMLCollection(0)
> sue: li#sue.menu
length: 3
> jane: li#jane.menu
> bob: li#bob.menu
> 0: li#bob.menu
> 1: li#jane.menu
> 2: li#sue.menu

Answer 1

Codepen演示

var userSelection = document.getElementsByClassName('menu');

for(var i = 0; i < userSelection.length; i++) {
  (function(index) {
    userSelection[index].addEventListener("click", function() {
       console.log("Clicked index: " + index);
     })
  })(i);
}

如@torazaburo在评论中指出的，如果要支持的浏览器符合最新版本的JavaScript ECMAScript 6（ES6），则可以使用以下代码。

var userSelection = document.getElementsByClassName('menu');

for(let i = 0; i < userSelection.length; i++) {
  userSelection[i].addEventListener("click", function() {
    console.log("Clicked index: " + i);
  })
}