本文讲解如何使用现代 JavaScript（事件委托 + data 属性）为多个国旗图片绑定独立的 mouseover/mouseout 交互，实现单图悬停时仅切换自身图片并同步更新标题为对应国名，避免全局误触发。

本文讲解如何使用现代 javascript（事件委托 + data 属性）为多个国旗图片绑定独立的 `mouseover`/`mouseout` 交互，实现单图悬停时仅切换自身图片并同步更新 `

` 标题为对应国名，避免全局误触发。

在初学 JavaScript 交互开发时，一个常见误区是为多个元素复用同一组无参函数（如 setNewImage()），导致所有元素被统一操作——这正是你遇到“悬停一个却影响全部”的根本原因。解决的关键在于：让每个事件处理器能准确识别并操作“当前触发事件的那个元素”，而非硬编码 ID。

推荐采用语义化、可扩展的现代方案：利用 HTML5 的 data-* 自定义属性存储国家名称和图片路径，并通过 event.target 或 this 绑定上下文，实现精准控制。

✅ 推荐实现方式（结构清晰、易于维护）

1. 修改 HTML：使用 data-* 属性声明元数据

为每个添加 class="flag"（便于批量选择），并用 data-name、data-flag、data-map 分别存储国名、国旗路径和地图路径：

<h1 id="title">Countries and Flags</h1>
@@##@@
@@##@@
@@##@@

? 注意：移除内联 onmouseover/onmouseout —— 行内脚本耦合度高、难以调试，应交由外部 JS 统一管理。

Java Maven Code Review
审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

2. 编写 JavaScript：事件驱动 + 数据驱动

在 flags.js 中使用 DOMContentLoaded 确保 DOM 加载完成，并为每个 .flag 元素分别绑定事件：

document.addEventListener('DOMContentLoaded', () => {
  const flags = document.querySelectorAll('.flag');
  const title = document.getElementById('title');
  const defaultTitle = 'Countries and Flags';

  // 初始化：设置所有国旗为 flag 图片
  flags.forEach(img => {
    img.src = img.dataset.flag;
  });

  // 为每个国旗绑定悬停逻辑
  flags.forEach(img => {
    img.addEventListener('mouseover', () => {
      img.src = img.dataset.map;
      title.textContent = img.dataset.name;
    });

    img.addEventListener('mouseout', () => {
      img.src = img.dataset.flag;
      title.textContent = defaultTitle;
    });
  });
});

3. （可选）增强健壮性：添加错误处理

防止因 dataset 缺失导致脚本中断：

img.addEventListener('mouseover', () => {
  if (img.dataset.map && img.dataset.name) {
    img.src = img.dataset.map;
    title.textContent = img.dataset.name;
  }
});