Javascript （JS）使用单击事件侦听器捕获数组元素的索引？

因此，我正在制作一个简单的RPG游戏，我有意使用Vanilla JS，因为我想重新审视/加强一些基础知识。我能够访问单击元素的一些数据，但我特别想要索引。我正在访问目标的子节点，但希望能够获取索引。这里是我的glitch.com链接：

chooseEnemy:function（）{
设villiansDiv=document.getElementById（'villians-div'）；
villiansDiv.addEventListener（'click'，函数（事件）{
让eventClicked=event.target；
让villianName=event.toElement.childNodes[0]。数据；
让孩子们=孩子们；
for（设i=0；i

为什么不直接将

事件侦听器添加到目标子元素中呢？我完全可以这样做。我想尝试通过将事件侦听器添加到父级来实现事件委派。
chooseEnemy: function() {
let villiansDiv = document.getElementById('villians-div');
villiansDiv.addEventListener('click', function(event) {
  let eventClicked = event.target;
  let villianName = event.toElement.childNodes[0].data;
  let children = villiansDiv.children;   

  for (let i = 0; i < villians.length; i++) {
    if (villianName === villians[i].name) {
      views.updateLog('You chose ' +  villians[i].name);
      battleArr.push(villians[i]);
      if (battleArr.length === 1) {
        for (let i = 0; i < children.length; i++) {
          children[i].setAttribute('class', 'inactive');
        }
      } else {
          for (let i = 0; i < children.length; i++) {
            children[i].classList.remove('inactive');
          }
        }
      if (villianName === "Fisherman") {
        let res = villians.splice(0, 1);
        // return;
      }
      else if (villianName === "Farmer") {
        let res = villians.splice(1, 1);
        // return;
      }
      else if (villianName === "Samurai") {
        let res = villians.splice(2, 1);
        // return;
      }
      else if (villianName === "Kuma") {
        let res = villians.splice(3, 1);
        // return;
      }
      else {
        views.updateLog('Click an enemy\'s name');
      }
      // views.updateVillians();
      views.updateChosenEnemy();
    } 
  }
});
}