如何通过父div的mouseenter触发所有子元素的随机化学符号更新函数？

核心思路 #

放弃给每个子span单独绑定事件，改为给父div（或其容器）绑定事件，触发时批量更新当前父div下的所有子span，大幅减少事件绑定数量，提升性能。

代码实现 #

1. 通用工具函数（抽离随机符号生成逻辑）

const randomSymbols = [
"Ac","Ag","Al","Am","Ar","As","At","Au","B","Ba","Be","Bh","Bi","Bk","Br","C","Ca","Cd","Ce",
"Cf","Cl","Cm","Cn","Co","Cr","Cs","Cu","Db","Ds","Dy","Er","Es","Eu","F","Fe","Fl","Fm","Fr",
"Ga","Gd","Ge","H","He","Hf","Hg","Ho","Hs","I","In","Ir","K","Kr","La","Li","Lr","Lu","Lv",
"Mc","Md","Mg","Mn","Mo","Mt","N","Na","Nb","Nd","Ne","Nh","Ni","No","Np","O","Og","Os","P",
"Pa","Pb","Pd","Pm","Po","Pr","Pt","Pu","Ra","Rb","Re","Rf","Rg","Rh","Rn","Ru","S","Sb","Sc",
"Se","Sg","Si","Sm","Sn","Sr","Ta","Tb","Tc","Te","Th","Ti","Tl","Tm","Ts","U","V","W","Xe",
"Y","Yb","Zn","Zr",
];

// 生成随机化学符号
function getRandomSymbol() {
  const randomIndex = Math.floor(Math.random() * randomSymbols.length);
  return randomSymbols[randomIndex];
}

2. 方案A：鼠标移入父div时批量更新

直接给每个父div绑定mouseenter事件，触发时更新当前父div下的所有子span：

// 选择所有父div（替换为你实际的父类选择器，比如示例中的".card"）
const parentDivs = document.querySelectorAll(".card");

parentDivs.forEach(parent => {
  parent.addEventListener("mouseenter", () => {
    // 仅在当前父div范围内查找子span，避免全局遍历
    const childSymbols = parent.querySelectorAll(".mySymbols");
    childSymbols.forEach(symbol => {
      symbol.textContent = getRandomSymbol();
    });
  });
});

3. 方案B：点击父div时批量更新

将事件替换为click即可，逻辑和方案A一致：

parentDivs.forEach(parent => {
  parent.addEventListener("click", () => {
    const childSymbols = parent.querySelectorAll(".mySymbols");
    childSymbols.forEach(symbol => {
      symbol.textContent = getRandomSymbol();
    });
  });
});

4. 进阶优化：事件委托（更适合大量父元素场景）

如果父div数量极多（比如900个），可以用事件委托，仅给父div的容器绑定一次事件，性能更优：

// 选择所有父div的共同容器（替换为你实际的容器选择器）
const cardContainer = document.getElementById("cardContainer");

// 使用mouseover（支持冒泡）代替mouseenter
cardContainer.addEventListener("mouseover", (e) => {
  // 找到触发事件的父div
  const targetParent = e.target.closest(".card");
  if (targetParent) {
    const childSymbols = targetParent.querySelectorAll(".mySymbols");
    childSymbols.forEach(symbol => {
      symbol.textContent = getRandomSymbol();
    });
  }
});

// 可选：避免鼠标在父div内移动时重复更新，添加移出重置标记
cardContainer.addEventListener("mouseout", (e) => {
  const targetParent = e.target.closest(".card");
  if (targetParent) {
    targetParent.dataset.hasUpdated = "false";
  }
});

说明 #

• 事件委托的优势：仅绑定一次事件，后续动态新增的父div也能自动生效，适合大规模元素场景。
• 可以根据需求选择鼠标移入或点击触发，两种方案可单独使用或同时保留。

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