开发猜盒游戏：如何获取被点击的div元素？

你可以通过以下两种常用方法获取被点击的div盒子，同时还能优化你现有的代码写法：

一、优化盒子元素的获取（替代逐个getElementById） #

不用单独定义每个box变量，直接通过类名批量获取所有盒子元素，代码更简洁：

// 获取所有带box类的元素，返回NodeList，可直接遍历
const boxes = document.querySelectorAll('.box');
// 生成随机数范围自动适配盒子数量
const randomNum = Math.floor(Math.random() * boxes.length);
// 正确盒子
const correctBox = boxes[randomNum];

二、获取被点击元素的两种实现方式 #

方式1：给每个盒子绑定点击事件 #

遍历所有盒子，为每个盒子添加点击事件，通过事件对象的target属性（或函数内的this）获取被点击元素：

boxes.forEach(box => {
  box.addEventListener('click', function(e) {
    // e.target 就是被点击的div元素
    const clickedBox = e.target;
    // 判断是否为正确盒子
    if (clickedBox === correctBox) {
      alert('猜对了！');
    } else {
      alert('猜错了，再试试！');
    }
  });
});

注：如果用箭头函数，this不会指向被点击元素，所以这里用普通函数更稳妥。

方式2：事件委托（推荐） #

给父容器wrapper绑定一个点击事件，通过事件冒泡判断点击的是否为盒子元素，这种方式更高效，尤其适合盒子数量多或动态生成的场景：

const wrapper = document.querySelector('.wrapper');
wrapper.addEventListener('click', function(e) {
  // 验证点击的元素是盒子
  if (e.target.classList.contains('box')) {
    const clickedBox = e.target;
    if (clickedBox === correctBox) {
      alert('猜对了！');
    } else {
      alert('猜错了，再试试！');
    }
  }
});

内容的提问来源于stack exchange，提问作者Ahmed salem