javascript - JS -> 从另一个函数访问变量

Question

我是这个网站和一般编程的新手，而且我在学校作业上有点困难。作为引用，这里是我当前正在处理的代码:Pastebin

function initChests(){
  let gameChests = document.getElementById('chests');

  for(let i = 0; i < 3; i++) {
    let singleChest = document.createElement('img');
    singleChest.src = 'images/chest-closed.png';
    singleChest.alt = 'A chest'
    singleChest.style.marginRight = '20px';

    gameChests.appendChild(singleChest);
  }
}

function initChestEventListeners() {
  singleChest.addEventListener('click', chestClicked);
}

function chestClicked(e){
  console.log("hello");
}

现在解决我的问题。我想要做的是在我的 initChestEventListeners 函数中访问变量 singleChest，而不将该变量设置为全局变量。

我知道我可以将 singleChest addEventListener 放入 initChests 函数中，但这也不是我想要做的。如果可能的话，我想让它与我拥有的函数结构一起工作。

这是可能的吗？如果可以，有人可以解释我需要做什么或将我重定向到可以帮助解释解决方案的指南吗？

提前谢谢您!亲切的问候。

Answer 1

一种选择是向父元素添加事件监听器，即 gameChests，然后单击时，如果单击的元素是 img，则对其执行某些操作:

function initChests() {
  const gameChests = document.getElementById('chests');
  for (let i = 0; i < 3; i++) {
    let singleChest = document.createElement('img');
    singleChest.src = 'images/chest-closed.png';
    singleChest.alt = 'A chest'
    singleChest.style.marginRight = '20px';

    gameChests.appendChild(singleChest);
  }
}

function initChestEventListeners() {
  const gameChests = document.getElementById('chests');
  gameChests.addEventListener('click', chestContainerClicked);
}

function chestContainerClicked(e) {
  if (!e.target.matches('img')) {
    return;
  }
  console.log("hello", e.target);
}

initChests();
initChestEventListeners();

<div id="chests"></div>

这种监视冒泡到父元素的事件的方法称为事件委托(delegate)。