本文介绍如何使用事件委托和 event.target 精准定位被悬停的收藏图标，并仅修改其对应 的 src 属性，避免影响其他相同类名的元素，适用于批量渲染的卡片列表场景。
本文介绍如何使用事件委托和 `event.target` 精准定位被悬停的收藏图标，并仅修改其对应 `` 的 `src` 属性，避免影响其他相同类名的元素，适用于批量渲染的卡片列表场景。
在构建电商类网站时，常需为多个结构一致的产品卡片添加交互功能——例如，当用户将鼠标悬停在某个卡片的“收藏图标”上时，仅该图标的 src 发生变化（如从空心星变为实心星），而其他卡片不受干扰。由于所有卡片共享相同的 class 名（如 .FavIcon），直接使用 document.querySelectorAll('.FavIcon') 配合循环绑定事件虽可行，但效率低且易引发闭包陷阱；更优解是采用事件委托（Event Delegation），将监听器统一绑定到公共父容器，并通过 event.target 动态识别触发源。
✅ 推荐方案：事件委托 + closest() 定位 + 局部更新
核心思路：
- 将 mouseover/mouseout 事件监听器绑定到所有卡片的共同祖先容器（如 #product-container）；
- 利用 e.target 判断是否点击/悬停在 .FavIcon 元素上；
- 使用 e.target.closest('.main-card') 向上查找所属卡片容器；
- 在该卡片范围内精准查询 .FavIcon，并更新其 src（可预设 hover 状态图片路径）。
<!-- 示例HTML结构（需确保父容器有唯一ID） -->
<div id="product-container">
<div class="main-card">
<!-- ...其他结构... -->
<div class="main-add-to-cart-div">
<a href="#" class="main-add-to-cart-fav">
<img src="img/icons/favorite-empty.png" alt="收藏" class="FavIcon"></a>
<!-- ... -->
</div>
</div>
<!-- 更多 main-card ... -->
</div>
// ✅ 步骤1：获取公共父容器
const container = document.querySelector('#product-container');
// ✅ 步骤2：定义状态映射（推荐集中管理资源路径）
const favIconSrc = {
default: 'img/icons/favorite-empty.png',
hover: 'img/icons/favorite-filled.png'
};
// ✅ 步骤3：事件处理函数（支持 mouseover / mouseout）
const handleFavHover = (e) => {
// 仅当触发元素是 .FavIcon 或其子元素（如 <a> 包裹 <img>）时生效
const iconLink = e.target.closest('.main-add-to-cart-fav');
if (!iconLink) return;
const img = iconLink.querySelector('.FavIcon');
if (!img) return;
if (e.type === 'mouseover') {
img.src = favIconSrc.hover;
} else if (e.type === 'mouseout') {
img.src = favIconSrc.default;
}
};
// ✅ 步骤4：绑定事件（注意：mouseout 可能触发频繁，生产环境建议加防抖或改用 CSS :hover）
container.addEventListener('mouseover', handleFavHover);
container.addEventListener('mouseout', handleFavHover);</a>
⚠️ 注意事项与优化建议
- 避免 querySelectorAll 全局遍历：原问题中尝试用 querySelectorAll('.FavIcon') 获取全部图标再逐个绑定，不仅性能差（N次 DOM 查询），还难以保证 this 指向正确；事件委托天然规避此问题。
-
event.target vs event.currentTarget：target 是实际触发事件的最深元素（可能是
或 ），currentTarget 是监听器绑定的容器（即 #product-container）。本方案依赖 target.closest() 安全向上查找，不依赖事件冒泡层级假设。
-
CSS 替代方案更轻量：若仅需视觉切换（无逻辑依赖），优先使用纯 CSS：
.main-add-to-cart-fav .FavIcon { transition: opacity 0.2s; } .main-add-to-cart-fav:hover .FavIcon { content: url('img/icons/favorite-filled.png'); }（注：content 属性需配合 display: inline-block 且兼容性有限；更通用做法是用背景图或双
切换 visibility）
- 移动端适配：mouseover/mouseout 在触摸设备上行为不稳定，如需兼容，请补充 touchstart/touchend 事件或改用 focus/blur 配合 tabindex。
通过事件委托，代码简洁、性能高效、维护性强——无论后续新增多少卡片，无需修改 JS 逻辑，真正实现“写一次，处处生效”。
