如何通过Event Delegation将多元素事件监听移至父元素deck？

嘿，我明白你现在的困扰——之前给每个.card绑事件都正常，但移到父元素.deck用事件委托就踩坑了对吧？别担心，我给你一个靠谱的实现方式，核心是利用事件冒泡和closest()方法，这是处理这种嵌套结构事件委托的最优解。

先确认下你的HTML结构（补全了省略的部分）：

<section class="deck">
  <div class="card">
    <div class="front"></div>
    <div class="back">
      <img src="#" alt="Card back image">
    </div>
  </div>
  <div class="card">
    <!-- 第二个卡片结构 -->
  </div>
  <!-- 更多卡片... -->
</section>

具体实现代码 #

// 1. 获取父容器deck
const deckElement = document.querySelector('.deck');

// 2. 给deck绑定你需要的事件（这里以click为例，换成你实际用的事件类型，比如mouseover）
deckElement.addEventListener('click', handleCardEvent);

// 3. 事件处理函数
function handleCardEvent(e) {
  // 关键：从点击的目标元素向上查找最近的.card元素
  // 不管你点的是.card本身、.front、.back还是里面的img，都能精准定位到对应的card
  const targetCard = e.target.closest('.card');

  // 只有找到有效的card元素时，才执行你的业务逻辑
  if (targetCard) {
    // 这里写你原来绑定在单个card上的代码，比如：
    targetCard.classList.toggle('flipped'); // 切换卡片翻转状态
    console.log('触发事件的卡片：', targetCard);
    // ...你的其他业务逻辑，比如卡片匹配、计数等
  }
}

为什么这个方案最优？ #

• 灵活性拉满：closest('.card')会从触发事件的元素（比如你点了卡片里的img）向上遍历DOM树，找到第一个匹配.card的元素，完美适配你的嵌套DOM结构，不用纠结到底点击的是哪个子元素。
• 性能友好：只需要给父元素绑一个事件监听，比给N个card绑事件节省内存，尤其是卡片数量多的时候优势明显。
• 自动兼容动态添加的卡片：如果后续用JS动态新增.card元素，不需要再手动给新卡片绑事件，事件委托会自动生效。

注意事项 #

• 记得把原来给单个.card绑定的事件监听移除掉，避免同一个动作触发两次逻辑。
• 如果你的事件是不冒泡的类型（比如focus、blur），需要在addEventListener的第三个参数传true，开启捕获阶段监听，但大部分交互事件（click、mouseenter等）都是冒泡的，不用改。

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