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");
}

现在是我的问题。我想做的是在singleChest函数中访问变量initChestEventListeners而不使变量成为全局变量。

我知道我可以将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>

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

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

1 个答案: